/*
Theme Name: Skila Signum Flatsome
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

/* ---- Skila Signum brand ---- */

/* Privilege member panel — violet gradient */
.skila-privilege {
	background: linear-gradient(135deg, #3B1E6E 0%, #6E3FB0 100%);
	color: #fff;
	border-radius: 18px;
}
.skila-privilege h1,
.skila-privilege h2,
.skila-privilege p,
.skila-privilege a { color: #fff; }
.skila-privilege .button.is-outline,
.skila-privilege .button { color: #4A2E8C; }

/* Small tracked eyebrow label (PRIVILEGE MEMBER) */
.skila-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-size: 0.72rem;
	opacity: 0.85;
	margin-bottom: 0;
}

/* Gold tracked collection labels (COLLECTION MARE / TERRA) */
.skila-label {
	color: #A88B5E;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 0.8rem;
	margin-bottom: 12px;
}

/* Card overlay subtitle in "art of the thread" */
.skila-cardtext { color: #fff; font-size: 0.9rem; margin: 0; }

.skila-small { font-size: 0.85rem; opacity: 0.9; }
.skila-small a { text-decoration: underline; }

/* Section title accent underline (violet) */
.section .title-style-center .title-inner:after,
.title-style-center b { background-color: #4A2E8C; }

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}
/* ---- Archives de collection (Mare / Terra) ---- */
/* Cible les archives de categorie produit. Mesures reprises du prototype,
   docs/lovable CollectionsSection.tsx. Voir docs/build-sheets/02-shop-collections.md */

/* Banniere : hauteur et fond */
.tax-product_cat .category-page-title.featured-title {
	min-height: 600px;
	height: 90vh;
}

.tax-product_cat .category-page-title .title-bg {
	background-size: cover;
	background-position: center;
}

/* Degrade du prototype : fond 40% en haut, transparent au milieu, 90% en bas */
.tax-product_cat .category-page-title .title-overlay {
	background: linear-gradient(
		to bottom,
		rgba(250, 248, 245, 0.40) 0%,
		rgba(250, 248, 245, 0) 50%,
		rgba(250, 248, 245, 0.90) 100%
	);
}

/* Le contenu est ancre en haut, comme dans le prototype (items-start + pt-56) */
.tax-product_cat .category-page-title .page-title-inner {
	align-items: flex-start;
	padding-top: 14rem;
	min-height: 600px;
}

/* Titre : Collection <em>Nom</em> */
.tax-product_cat h1.shop-page-title {
	font-family: "Playfair Display", Georgia, serif;
	font-style: normal;
	font-size: clamp(2.25rem, 4vw, 3.75rem);
	line-height: 1.1;
	color: #fff;
	text-shadow: 0 10px 15px rgba(0, 0, 0, 0.25);
	margin: 0;
}

.tax-product_cat h1.shop-page-title em {
	font-style: italic;
}

/* Sous-titre, repris de la description de categorie */
.tax-product_cat .skila-collection-subtitle {
	max-width: 36rem;
	margin: 1rem auto 0;
	color: rgba(50, 36, 27, 0.8);
}

.tax-product_cat .skila-collection-subtitle p {
	margin: 0;
}

/* Filet chaud sous le sous-titre : w-20 h-0.5 dans le prototype */
.tax-product_cat .skila-collection-rule {
	width: 5rem;
	height: 2px;
	margin: 1.5rem auto 0;
	background: #814C31;
}

@media (max-width: 849px) {
	.tax-product_cat .category-page-title.featured-title,
	.tax-product_cat .category-page-title .page-title-inner {
		min-height: 420px;
		height: auto;
	}

	.tax-product_cat .category-page-title .page-title-inner {
		padding-top: 7rem;
		padding-bottom: 3rem;
	}
}

/* ---- Palette du prototype (docs/lovable/src/index.css) ---- */
/* Le prototype porte encore les variables d un gabarit de boulangerie ;
   seules les valeurs reellement utilisees sont reprises ici. */

:root {
	--skila-background: #FAF8F5; /* hsl(40 33% 97%) ivoire chaud */
	--skila-foreground: #32241B; /* hsl(25 30% 15%) */
	--skila-muted-fg:   #847062; /* hsl(25 15% 45%) */
	--skila-accent:     #672EB8; /* hsl(265 60% 45%) violet */
	--skila-primary:    #6F2A36; /* hsl(350 45% 30%) bordeaux */
	--skila-border:     #E2DACF; /* hsl(35 25% 85%) */
	--skila-cream-dark: #F1ECE4; /* hsl(38 30% 92%) */
	--skila-rule:       #814C31; /* hsl(20 45% 35%) */
}

body {
	background-color: var(--skila-background);
	color: var(--skila-foreground);
}

/* ---- Carte produit, reprise du prototype ---- */

.skila-card .col-inner {
	background: none;
	box-shadow: none;
}

.skila-card-media {
	position: relative;
}

.skila-card-image {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 2px;
	background: var(--skila-cream-dark);
}

.skila-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
	transition: transform .7s ease;
}

.skila-card:hover .skila-card-image img {
	transform: scale(1.05);
}

/* Coeur de favori, en pastille blanche */
.skila-card-wishlist {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
}

.skila-card-wishlist .yith-wcwl-add-to-wishlist {
	margin: 0;
}

/* Coeur des favoris. Mesures du prototype (CollectionsSection.tsx) :
   bouton de 32 px (p-2 autour d une icone de 16), fond blanc a 90 %,
   ombre legere, contour quand la piece n est pas en favori, plein et rouge
   hsl(350 70% 50%) quand elle l est.
   Les gabarits woocommerce/add-to-wishlist-*.php n impriment que l icone :
   YITH ajoute sinon un libelle, puis un message et un lien « Voir la liste
   d envies » qui se chevauchent dans un bouton de cette taille. */
.skila-card-wishlist a,
.skila-heart {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	color: rgba(50, 36, 27, .7);
	box-shadow: rgba(0, 0, 0, .05) 0 1px 2px 0;
	transition: background-color .2s ease, color .2s ease;
}

.skila-card-wishlist a:hover,
.skila-heart:hover {
	background: #fff;
	color: #D92644;
}

.skila-heart.is-added {
	color: #D92644;
}

.skila-heart-icon {
	display: block;
	width: 16px;
	height: 16px;
}

/* Garde-fou : YITH remplace le fragment apres un ajout en AJAX et peut y
   glisser son propre libelle. Rien d autre que l icone ne doit s afficher. */
.skila-card-wishlist .yith-wcwl-add-to-wishlist > span,
.skila-card-wishlist .feedback,
.skila-card-wishlist .separator,
.skila-card-wishlist .view-wishlist,
.skila-card-wishlist .yith-wcwl-add-button a > span {
	display: none;
}

/* Rangee de miniatures : Tissu / Matiere / Porte */
.skila-card-thumbs {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}

.skila-card-thumb {
	display: block;
	width: 48px;
	height: 48px;
	overflow: hidden;
	opacity: .7;
	transition: opacity .2s ease;
}

.skila-card-thumb.is-active,
.skila-card-thumb:hover {
	opacity: 1;
}

.skila-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Titre */
.skila-card-body {
	margin-top: 12px;
	text-align: left;
}

.skila-card-title {
	margin: 0;
	font-family: "Playfair Display", Georgia, serif;
	font-size: .875rem;
	font-weight: 400;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--skila-foreground);
	transition: color .2s ease;
}

.skila-card-titlelink:hover .skila-card-title {
	color: var(--skila-accent);
}

/* Bouton pleine largeur */
.skila-card .button,
.skila-card .add_to_cart_button,
.skila-card .product_type_simple {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin: 12px 0 0;
	padding: .625rem 1rem;
	border: 1px solid #2E006C;
	border-radius: 2px;
	background: #2E006C;
	color: #fff;
	font-family: Lato, system-ui, sans-serif;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .2em;
	text-transform: uppercase;
	line-height: 1.4;
	min-height: 0;
}

.skila-card .button:hover {
	background: #fff;
	color: #2E006C;
}

/* Le prix est affiche par content-product.php, sous le titre (choix client,
   octobre 2026). Flatsome peut encore sortir ces deux elements : masques. */
.skila-card .category-name,
.skila-card .product-title-inner {
	display: none;
}

/* YITH sort un libelle texte ; le prototype ne montre qu un coeur */
.skila-card-wishlist .yith-wcwl-add-to-wishlist,
.skila-card-wishlist .yith-wcwl-add-button,
.skila-card-wishlist .yith-wcwl-wishlistaddedbrowse,
.skila-card-wishlist .yith-wcwl-wishlistexistsbrowse {
	display: block;
	margin: 0;
	line-height: 0;
}

.skila-card-wishlist a span,
.skila-card-wishlist .feedback,
.skila-card-wishlist .yith-wcwl-tooltip {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* YITH impose au SVG sa propre taille (25 px) ET sa propre couleur, posee sur
   l element svg lui-meme via --add-to-wishlist-icon-color, defaut #000. Le
   trait etant dessine en currentColor, le coeur ressortait noir et trop gros.
   Le prototype montre un coeur de 16 px, trait fin, en brun doux a 70%.
   On cible donc le svg directement, pas seulement son parent. */
.skila-card-wishlist .yith-wcwl-add-to-wishlist svg.yith-wcwl-icon-svg,
.skila-card-wishlist .yith-wcwl-add-to-wishlist .add_to_wishlist img {
	/* Centrage absolu : le balisage de YITH place un libelle a cote de
	   l icone, ce qui decalait le coeur de 2,5 px vers la gauche. Ainsi
	   positionne, aucun voisin ni blanc de balisage ne peut le deplacer. */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 16px;
	height: 16px;
	display: block;
	flex: 0 0 auto;
	stroke-width: 1.5;
	color: rgba(50, 36, 27, .7);
}

.skila-card-wishlist a:hover .yith-wcwl-add-to-wishlist svg.yith-wcwl-icon-svg,
.skila-card-wishlist .yith-wcwl-add-to-wishlist a:hover svg.yith-wcwl-icon-svg {
	color: var(--skila-foreground);
}

.skila-card-wishlist a i {
	font-size: 15px;
	line-height: 1;
}

/* Etat ajoute : le coeur se remplit, sans changer de gabarit. */
.skila-card-wishlist .yith-wcwl-wishlistaddedbrowse a,
.skila-card-wishlist .yith-wcwl-wishlistexistsbrowse a {
	color: var(--skila-accent);
}

.skila-card-wishlist .yith-wcwl-wishlistaddedbrowse svg,
.skila-card-wishlist .yith-wcwl-wishlistexistsbrowse svg {
	fill: currentColor;
}

/* ---- Barre de filtres, reprise du prototype ---- */

.skila-filterbar {
	border-top: 1px solid rgba(50, 36, 27, .1);
	border-bottom: 1px solid rgba(50, 36, 27, .1);
	background: rgba(250, 248, 245, .3);
	margin-bottom: 3rem;
}

.skila-filterbar .container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	padding-top: 1.25rem;
	padding-bottom: 1.25rem;
}

.skila-filterbar-label {
	margin-right: 8px;
	font-size: 11px;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--skila-muted-fg);
}

/* Pastille de filtre */
.skila-filter {
	position: relative;
}

.skila-filter > summary {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-width: 140px;
	padding: .5rem 1rem;
	border: 1px solid rgba(103, 46, 184, .3);
	border-radius: 999px;
	background: #fff;
	color: var(--skila-foreground);
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	cursor: pointer;
	list-style: none;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.skila-filter > summary::-webkit-details-marker {
	display: none;
}

.skila-filter > summary:hover,
.skila-filter[open] > summary {
	background: var(--skila-accent);
	border-color: var(--skila-accent);
	color: #fff;
}

.skila-filter-chevron {
	width: 8px;
	height: 8px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
}

.skila-filter-list {
	position: absolute;
	z-index: 20;
	top: calc(100% + 6px);
	left: 0;
	min-width: 200px;
	max-height: 320px;
	overflow-y: auto;
	margin: 0;
	padding: .5rem 0;
	list-style: none;
	background: #fff;
	border: 1px solid var(--skila-border);
	border-radius: 4px;
	box-shadow: 0 8px 30px -8px rgba(50, 36, 27, .15);
}

.skila-filter-list li {
	margin: 0;
	list-style: none;
}

.skila-filter-list a {
	display: block;
	padding: .5rem 1rem;
	color: var(--skila-foreground);
	font-size: 13px;
}

.skila-filter-list a:hover,
.skila-filter-list a.is-active {
	background: rgba(103, 46, 184, .08);
	color: var(--skila-accent);
}

@media (max-width: 549px) {
	.skila-filter > summary {
		min-width: 110px;
		padding-left: .75rem;
		padding-right: .75rem;
	}
}

/* Miniatures cliquables : echange du visuel principal */
.skila-card-image img {
	opacity: 1;
	transition: transform .7s ease, opacity .16s ease;
}

button.skila-card-thumb {
	padding: 0;
	margin: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	border-radius: 0;
	min-height: 0;
	box-shadow: none;
}

button.skila-card-thumb:hover,
button.skila-card-thumb:focus-visible {
	background: transparent;
	opacity: 1;
}

button.skila-card-thumb:focus-visible {
	outline: 2px solid var(--skila-accent);
	outline-offset: 2px;
}

/* Bouton de remise a zero des filtres */
.skila-filter-reset {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: .5rem 1rem;
	border: 1px solid transparent;
	border-radius: 999px;
	background: transparent;
	color: var(--skila-muted-fg);
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color .2s ease;
}

.skila-filter-reset:hover {
	color: var(--skila-accent);
}

/* ---- Page Univers (docs/lovable Univers.tsx) ---- */

/* Banniere */
.skila-u-hero h1 {
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(2.5rem, 6vw, 5rem);
	font-weight: 400;
	line-height: 1.05;
	color: #fff;
	text-shadow: 0 10px 20px rgba(0, 0, 0, .22);
	margin: 0;
}

.skila-u-cue {
	margin: 0;
	font-size: 10px;
	letter-spacing: .32em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .85);
}

.skila-u-cue::after {
	content: "";
	display: block;
	width: 1px;
	height: 42px;
	margin: 14px auto 0;
	background: rgba(255, 255, 255, .55);
}

/* Intertitres de section */
.skila-u-eyebrow {
	margin: 0 0 .75rem;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--skila-accent);
}

.skila-u-intro h2 {
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(1.75rem, 3.4vw, 3rem);
	font-weight: 400;
	color: var(--skila-foreground);
	margin: 0;
}

/* Etapes du voyage */
.skila-u-step-no {
	margin: 0 0 .5rem;
	font-size: 11px;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--skila-accent);
}

.skila-u-step-title {
	font-family: "Playfair Display", Georgia, serif;
	font-style: italic;
	font-size: clamp(2rem, 4vw, 3.25rem);
	font-weight: 400;
	line-height: 1.1;
	color: var(--skila-foreground);
	margin: 0 0 1rem;
}

.skila-u-step-label {
	margin: 0 0 1.25rem;
	font-size: 11px;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--skila-muted-fg);
}

.skila-u-step p {
	color: var(--skila-muted-fg);
	line-height: 1.75;
}

.skila-u-link {
	margin-top: 1.5rem;
}

.skila-u-link a {
	font-size: 11px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--skila-accent);
	border-bottom: 1px solid transparent;
	transition: border-color .2s ease;
}

.skila-u-link a:hover {
	border-bottom-color: var(--skila-accent);
}

/* Notre Histoire */
.skila-u-story-title,
.skila-u-craft-title {
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(1.9rem, 3.6vw, 3.25rem);
	font-weight: 400;
	line-height: 1.15;
	color: var(--skila-foreground);
	margin: 0;
}

.skila-u-story-title em,
.skila-u-craft-title em {
	font-style: italic;
	color: var(--skila-primary);
}

.skila-u-lead {
	max-width: 46rem;
	margin: 1.5rem auto 0;
	color: var(--skila-muted-fg);
	line-height: 1.8;
}

.skila-u-craft p {
	color: var(--skila-muted-fg);
	line-height: 1.75;
}

@media (max-width: 849px) {
	.skila-u-step .col,
	.skila-u-craft .col {
		padding-bottom: 1.5rem;
	}
}

/* Bouton du bloc savoir-faire : chocolat du prototype, pas le gris de Flatsome */
.skila-u-craft .button {
	margin-top: 1.75rem;
	padding: .75rem 1.5rem;
	border: 1px solid #47301F;
	border-radius: 2px;
	background: #47301F;
	color: #fff;
	font-family: Lato, system-ui, sans-serif;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .18em;
	text-transform: uppercase;
	min-height: 0;
}

.skila-u-craft .button:hover {
	background: transparent;
	color: #47301F;
}

.skila-u-craft .button span {
	color: inherit;
}

/* ---- Le fil du voyage (page Univers) ---- */

.skila-u-journey {
	position: relative;
	overflow: hidden;
}

.skila-thread {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	justify-content: center;
	pointer-events: none;
	opacity: .9;
	z-index: 0;
}

.skila-thread svg {
	width: 100%;
	height: 100%;
	max-width: 42rem;
}

.skila-thread-dot {
	opacity: 0;
}

/* Le contenu passe devant le fil */
.skila-u-journey .row,
.skila-u-journey .ux-text,
.skila-u-journey .is-divider,
.skila-u-journey > .section-content {
	position: relative;
	z-index: 1;
}

.skila-u-journey-title {
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(1.75rem, 3.4vw, 3rem);
	font-weight: 400;
	color: var(--skila-foreground);
	margin: 0;
}

.skila-u-journey-title em {
	font-style: italic;
	color: var(--skila-primary);
}

/* ---- Animations des pages de marque ---- */
/* Reprises du prototype : apparition en fondu avec une legere montee,
   filets qui se deploient, image qui glisse depuis la gauche. */

.skila-motion .skila-reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .8s ease-out, transform .8s ease-out;
}

.skila-motion .skila-reveal.is-in {
	opacity: 1;
	transform: none;
}

.skila-motion .skila-reveal--plain { transform: none; }
.skila-motion .skila-reveal--left  { transform: translateX(-40px); }
.skila-motion .skila-reveal--rule  { transform: scaleX(0); transform-origin: center; }

.skila-motion .skila-reveal--rule.is-in { transform: scaleX(1); }

/* Cascade : un dixieme de seconde entre chaque element */
.skila-d1 { transition-delay: .1s; }
.skila-d2 { transition-delay: .2s; }
.skila-d3 { transition-delay: .3s; }
.skila-d4 { transition-delay: .4s; }
.skila-d5 { transition-delay: .5s; }

/* Les etapes du voyage sont pilotees par la progression du fil */
.skila-motion .skila-u-journey .skila-u-step {
	opacity: 0;
	will-change: opacity, transform;
}

/* Banniere : le titre monte a l ouverture, l indicatif suit */
.skila-u-hero h1 {
	animation: skila-rise 1.2s ease-out both;
}

.skila-u-hero .skila-u-cue {
	animation: skila-drop 1s ease-out 1.2s both;
}

.skila-u-hero .skila-u-cue::after {
	animation: skila-bob 2s ease-in-out 2.2s infinite;
}

@keyframes skila-rise {
	from { opacity: 0; transform: translateY(30px); }
	to   { opacity: 1; transform: none; }
}

@keyframes skila-drop {
	from { opacity: 0; transform: translateY(-10px); }
	to   { opacity: 1; transform: none; }
}

@keyframes skila-bob {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(8px); }
}

@media (prefers-reduced-motion: reduce) {
	.skila-reveal,
	.skila-u-hero h1,
	.skila-u-hero .skila-u-cue,
	.skila-u-hero .skila-u-cue::after {
		animation: none !important;
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	.skila-u-journey .skila-u-step { opacity: 1 !important; }
}

/* Filets maitrises : le shortcode divider de Flatsome ne transmet pas de classe */
.skila-rule {
	display: block;
	width: 80px;
	height: 2px;
	margin: 1.5rem auto 0;
	background: var(--skila-rule);
}

.skila-rule--left {
	width: 60px;
	margin-left: 0;
	margin-right: auto;
}

/* ---- Pages d article de l Univers (Como, Mahdia) ---- */
/* Tailles relevees sur le prototype a 1440 px de large :
   titre 96 px italique, interligne 1 ; sur-titre 12 px, interlettrage 0.4em ;
   sous-titre 16 px, interlettrage 0.3em ; chapeau 30 px italique ;
   texte courant 18 px. Les selecteurs sont assez specifiques pour passer
   devant les regles de banniere de Flatsome, qui imposaient 56 px en romain. */

.skila-a-hero .skila-a-eyebrow {
	margin: 0 0 1rem;
	font-family: Lato, system-ui, sans-serif;
	font-size: 12px;
	line-height: 1.35;
	letter-spacing: .4em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .85);
}

.skila-a-hero h1.skila-a-title,
h1.skila-a-title {
	font-family: "Playfair Display", Georgia, serif;
	font-style: italic;
	font-weight: 400;
	font-size: clamp(3rem, 6.7vw, 6rem);
	line-height: 1;
	color: #fff;
	text-shadow: 0 10px 20px rgba(0, 0, 0, .25);
	margin: 0 0 1rem;
}

.skila-a-hero .skila-a-sub {
	margin: 0;
	font-family: Lato, system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .9);
}

/* Colonne de lecture */
.skila-a-back {
	margin: 0 0 2rem;
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.skila-a-back a {
	color: var(--skila-muted-fg);
	transition: color .2s ease;
}

.skila-a-back a:hover {
	color: var(--skila-accent);
}

.skila-a-body h2.skila-a-intro,
h2.skila-a-intro {
	font-family: "Playfair Display", Georgia, serif;
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.5rem, 2.1vw, 1.875rem);
	line-height: 1.2;
	color: var(--skila-foreground);
	margin: 0;
}

.skila-a-body p {
	font-size: 18px;
	line-height: 1.6;
	color: var(--skila-muted-fg);
}

.skila-a-body .skila-a-back {
	font-size: 11px;
}

/* Un chapeau suivi directement d un paragraphe : sans la barre doree pour
   les separer, l ecart retombait a celui d un interligne. */
.skila-a-body h2.skila-a-intro + p {
	margin-top: 1.5rem;
}

.skila-a-body .skila-rule {
	margin-top: 1.25rem;
	margin-bottom: 2rem;
}

/* Visuels intercales et leur legende */
.skila-a-figure {
	margin: 2.5rem 0 .75rem;
}

.skila-a-body .skila-a-caption {
	margin: 0 0 2rem;
	font-family: "Playfair Display", Georgia, serif;
	font-style: italic;
	font-size: .9rem;
	letter-spacing: 0;
	text-transform: none;
	text-align: center;
	color: var(--skila-muted-fg);
}

/* Panneau Membre Privilege : les liens heritaient du violet du theme,
   invisible sur un fond violet. */
.home_bg a {
	color: #fff;
	border-bottom: 1px solid rgba(255, 255, 255, .5);
	transition: border-color .2s ease;
}

.home_bg a:hover {
	border-bottom-color: #fff;
}

.home_bg .button a,
.home_bg a.button {
	border-bottom: none;
}

/* ---- Page Atelier ---- */

.skila-a-sub-lead {
	max-width: 32rem;
	margin: 1rem auto 0;
	color: rgba(255, 255, 255, .9);
	font-size: .95rem;
}

/* Les sections en vis-a-vis reprennent la mise en forme des etapes */
.skila-u-step-sec p {
	color: var(--skila-muted-fg);
	line-height: 1.8;
}

/* Temoignage */
.skila-a-blockquote {
	max-width: 44rem;
	margin: 2rem auto 0;
	padding: 0;
	border: none;
	font-family: "Playfair Display", Georgia, serif;
	font-style: italic;
	font-size: clamp(1.15rem, 2.2vw, 1.6rem);
	line-height: 1.6;
	color: var(--skila-foreground);
	background: none;
}

.skila-a-blockquote::before { content: "\201C"; }
.skila-a-blockquote::after  { content: "\201D"; }

/* Quatre piliers */
.skila-a-pillars .row {
	margin-top: 3rem;
}

.skila-pillar {
	padding-left: 1.5rem;
	border-left: 1px solid var(--skila-border);
	height: 100%;
}

.skila-pillar h3 {
	font-family: "Playfair Display", Georgia, serif;
	font-style: italic;
	font-size: 1.15rem;
	font-weight: 400;
	color: var(--skila-foreground);
	margin: 0 0 .75rem;
}

.skila-pillar p {
	font-size: .875rem;
	line-height: 1.7;
	color: var(--skila-muted-fg);
	margin: 0;
}

@media (max-width: 549px) {
	.skila-pillar {
		padding-left: 1rem;
		margin-bottom: 1.75rem;
	}
}

/* ---- Accueil : largeurs, gouttieres et ombres ----

   Le prototype pose ses grilles en CSS grid : la colonne fait exactement la
   largeur annoncee et la gouttiere se place entre les cartes. Flatsome, lui,
   remborre chaque colonne vers l interieur, si bien qu une rangee de 768 px
   ne donnait que des cartes de 354 au lieu de 368, avec un jour de 30 au lieu
   de 32 et un retrait parasite sur les bords.

   On retablit la geometrie du prototype en elargissant la rangee de deux
   rembourrages et en fixant ceux-ci a 16 px : la rangee deborde alors de la
   moitie d une gouttiere de chaque cote, et les cartes retombent exactement
   ou le prototype les met.

     Collections   rangee 800  -> cartes 368, jour 32, de 336 a 1104
     L art du fil  rangee 1056 -> cartes 496, jour 32, de 208 a 1232

   Ombre relevee au protocole DevTools sur les deux grilles :
   rgba(71,48,31,.15) 0 8px 30px -8px, rayon 16 px pour les collections,
   8 px pour les cartes du fil. */

.skila-h-collections .row > .col,
.skila-h-thread .row > .col {
	padding-left: 16px;
	padding-right: 16px;
	padding-bottom: 0;
}

.skila-h-collections .skila-h-card,
.skila-h-thread .banner {
	box-shadow: rgba(71, 48, 31, .15) 0 8px 30px -8px;
	transition: box-shadow .5s ease;
}

.skila-h-collections .skila-h-card:hover,
.skila-h-thread .banner:hover {
	box-shadow: rgba(71, 48, 31, .25) 0 20px 60px -12px;
}

.skila-h-thread .banner,
.skila-h-thread .banner .banner-inner,
.skila-h-thread .banner .banner-bg {
	border-radius: 8px;
}

.skila-h-thread .banner {
	overflow: hidden;
}

/* Les deux rangees du fil sont une seule grille dans le prototype : le jour
   vertical entre elles vaut la gouttiere, 32 px. */
.skila-h-thread .row + .row {
	margin-top: 32px;
}

/* Respiration sous le titre de section. Le prototype separe le titre de sa
   grille de 62 px pour les collections, 60 pour le fil ; le filet dore
   s intercale. */
.skila-h-collections .section-title-container,
.skila-h-collections h2,
.skila-h-thread h2 {
	margin-bottom: 20px;
}

.skila-h-collections .is-divider,
.skila-h-thread .is-divider {
	margin-top: 0;
	margin-bottom: 40px;
}

/* ---- Accueil : carte « Membre Privilege » ----
   Prototype : max-w-4xl, soit 896 px, coins a 12 px, et la section est bornee
   d un filet en haut et en bas. */

.skila-h-news {
	border-top: 1px solid rgba(50, 36, 27, .1);
	border-bottom: 1px solid rgba(50, 36, 27, .1);
}

/* La rangee n est volontairement plus en mode « collapse » : ce mode annule
   le rembourrage des colonnes par un !important, impossible a surcharger
   proprement, et plafonne par ailleurs la rangee a 1050 px. */
.skila-h-news .row {
	margin-left: auto;
	margin-right: auto;
}

.skila-h-news .row > .col.home_bg {
	border-radius: 12px;
	padding: 64px;
}

@media (max-width: 849px) {
	.skila-h-news .row > .col.home_bg {
		padding: 48px 32px;
	}
}

/* ---- Accueil : bande « Nos services » ----
   Prototype : les quatre reperes ne sont pas des colonnes egales mais une
   ligne centree, chaque repere a la largeur de son contenu, separes de 64 px.
   L intitule est un simple libelle de 14 px en capitales, non un gros titre. */

.skila-h-services .row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 64px;
	/* Flatsome decale ses rangees d une demi-gouttiere vers la gauche pour
	   compenser le rembourrage des colonnes ; ici il n y en a plus, et le
	   decalage desaxait la ligne de 15 px. */
	margin-left: auto;
	margin-right: auto;
}

/* Flatsome pose un ::after de deblocage de flottants sur ses rangees. Dans un
   conteneur flex il devient un element a part entiere : il prenait une
   gouttiere de 64 px, ce qui desaxait la ligne d exactement 32 px. */
.skila-h-services .row::before,
.skila-h-services .row::after {
	display: none;
}

.skila-h-services .row > .col {
	width: auto;
	max-width: none;
	flex: 0 0 auto;
	padding-left: 0;
	padding-right: 0;
	padding-bottom: 0;
}

.skila-h-services h2 {
	font-family: Lato, system-ui, sans-serif;
	font-size: 14px;
	line-height: 1.4;
	letter-spacing: .3em;
	text-transform: uppercase;
	font-weight: 500;
	color: #000;
	margin-bottom: 12px;
}

.skila-h-services .is-divider {
	margin-top: 0;
	margin-bottom: 40px;
}

@media (max-width: 849px) {
	.skila-h-services .row {
		gap: 32px;
	}
}

/* ---- Accueil : echelle des titres ----

   Releve du prototype (Index.tsx et ses composants) a 1440 px :

     titre de section   h2  36 px  interligne 40   (text-4xl)
     titre de carte     h3  30 px  interligne 36   (text-3xl), bas de casse
     titre de service   h3  16 px                  (text-base)

   Le theme les rendait en 26 px et 20 px, et forcait les capitales sur les
   titres de carte. Les regles restent bornees aux sections de l accueil pour
   ne pas deplacer l echelle des autres pages. */

.skila-h-collections h2,
.skila-h-news h2,
.skila-h-thread h2 {
	font-size: 36px;
	line-height: 1.11;
}

/* Flatsome enveloppe le libelle dans un span, porteur des capitales et de
   l interlettrage : c est lui qu il faut viser, pas seulement le h3. */
.skila-h-thread .section-title,
.skila-h-thread .section-title-main,
.skila-h-thread h3.section-title span.section-title-main {
	font-size: 30px;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	font-weight: 400;
}

/* Le trait decoratif que Flatsome ajoute de part et d autre du titre n a pas
   d equivalent dans le prototype. */
.skila-h-thread .section-title b {
	display: none;
}

.skila-h-services h3 {
	font-size: 16px;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: none;
}

/* ---- Accueil : bloc « Nos collections » ----

   Releve du prototype (RecommendationsSection.tsx) : grille de deux cartes
   dans une colonne de 768 px, visuel au format 4/5 arrondi a 16 px, mention
   de collection en 9 px capitales interlettrage 0.3em, puis le bouton. */

.skila-h-collections .skila-h-card img {
	aspect-ratio: 4 / 5;
	width: 100%;
	object-fit: cover;
	border-radius: 16px;
	transition: transform .7s ease;
}

.skila-h-collections .skila-h-card {
	overflow: hidden;
	border-radius: 16px;
}

.skila-h-collections .skila-h-card:hover img {
	transform: scale(1.05);
}

.skila-h-collections .skila-h-cap {
	margin: .75rem 0 0;
	font-family: Lato, system-ui, sans-serif;
	font-size: 9px;
	line-height: 1.6;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--skila-muted-fg);
}

/* Bouton repris du prototype : fond gris tres clair, texte et filet violets,
   inverses au survol. */
.skila-h-collections .skila-h-btn,
.skila-h-collections a.skila-h-btn {
	margin-top: .75rem;
	background-color: #F3F4F6;
	border-color: #2E006C;
	color: #2E006C;
	transition: background-color .3s ease, color .3s ease;
}

.skila-h-collections .skila-h-btn:hover,
.skila-h-collections a.skila-h-btn:hover {
	background-color: #2E006C;
	border-color: #2E006C;
	color: #fff;
}

/* ---- Rythme vertical de l accueil ----

   Releve du prototype (Index.tsx) a 1440 px. L attribut `padding` de Flatsome
   pose la meme valeur en haut et en bas ; la section « L art du fil » est la
   seule dissymetrique du prototype (pt-12 pb-32), d ou cette regle. */

.skila-h-thread {
	padding-bottom: 128px !important;
}

@media (max-width: 849px) {
	.skila-h-thread {
		padding-bottom: 72px !important;
	}
}

/* ---- Pied de page ----

   Releve du prototype (Footer.tsx) : fond #2E006C, trois blocs sur une ligne,
   la marque centree en valeur absolue pour rester au milieu quelle que soit
   la largeur des colonnes ; intitules 14 px interlettrage 0.2em, liens 12 px.

   Un ecart assume sur la couleur des intitules. Le prototype les pose en
   `text-gold`, soit hsl(265 60% 45%) — le meme violet que le fond, a peine
   plus clair : le rapport de contraste tombe a 1.7 pour 1. On reprend donc
   `gold-light`, hsl(265 55% 65%), qui figure dans la palette du prototype et
   passe a 4 pour 1. */

.skila-footer {
	background-color: #2E006C;
	padding: 2.5rem 0;
}

.skila-f-row {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 3rem;
	margin-bottom: 2rem;
}

.skila-f-legal {
	text-align: left;
}

.skila-f-contact {
	text-align: right;
}

.skila-f-title {
	margin: 0 0 1rem;
	font-family: "Playfair Display", Georgia, serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.4;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #A379D9;
}

ul.skila-f-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.skila-f-list li {
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
	color: rgba(250, 248, 245, .6);
}

.skila-f-list a {
	color: rgba(250, 248, 245, .6);
	transition: color .3s ease;
}

.skila-f-list a:hover,
.skila-f-list a:focus-visible {
	color: #A379D9;
}

/* La marque tient au centre de la ligne, sans dependre de la largeur des deux
   colonnes qui l encadrent. Le logo fourni est noir : meme filtre que dans
   l en-tete transparent, plutot qu un second fichier. */
.skila-f-mark {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.skila-f-mark img {
	height: 44px;
	width: auto;
	opacity: .9;
	filter: brightness(0) invert(1);
}

.skila-f-copy {
	margin: 0;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(250, 248, 245, .1);
	font-size: 12px;
	text-align: center;
	color: rgba(250, 248, 245, .5);
}

@media (max-width: 849px) {
	.skila-f-row {
		flex-direction: column;
		gap: 2rem;
		text-align: center;
	}

	.skila-f-legal,
	.skila-f-contact {
		text-align: center;
	}

	.skila-f-list {
		align-items: center;
	}

	/* Empilee, la marque reprend sa place dans le flux, entre les deux blocs. */
	.skila-f-mark {
		position: static;
		transform: none;
		order: -1;
	}
}

/* ---- En-tete transparent de l accueil ----

   Le prototype (Header.tsx) ne pose un en-tete transparent que sur l accueil,
   et bascule des le 51e pixel de defilement :

     solid = isScrolled || !isHome
     className = solid ? 'text-foreground' : 'text-cream'

   Flatsome exprime deja cette bascule : #header porte la classe `transparent`
   au repos et la perd des que l en-tete colle. Il ne manquait que la couleur
   claire — le theme laissait les liens en gris fonce sur la photo du hero,
   donc illisibles. Rien ici ne depend du JavaScript : la classe est posee par
   Flatsome, et sans elle l en-tete reste dans son etat opaque, lisible.

   La portee est naturelle : seule une page servie par un gabarit transparent
   recoit cette classe, c est-a-dire l accueil aujourd hui. */

#header.transparent .header-nav-main > li > a,
#header.transparent .mobile-nav > li > a {
	color: rgba(255, 255, 255, .92);
	transition: color .3s ease;
}

#header.transparent .header-nav-main > li > a:hover,
#header.transparent .header-nav-main > li > a:focus-visible,
#header.transparent .header-nav-main > li.active > a,
#header.transparent .mobile-nav > li > a:hover {
	color: #fff;
}

/* Le logo fourni est noir ; on le passe en blanc tant que le fond est la
   photo. Un filtre evite d avoir a maintenir un second fichier. */
#header.transparent #logo img {
	filter: brightness(0) invert(1);
	transition: filter .3s ease;
}

/* Le trait de separation et les pictogrammes suivent le meme sort. */
#header.transparent .header-divider {
	border-color: rgba(255, 255, 255, .3);
}

#header.transparent .header-nav-main .icon-heart,
#header.transparent .header-nav-main .icon-user,
#header.transparent .mobile-nav .icon-heart,
#header.transparent .mobile-nav .icon-user {
	color: rgba(255, 255, 255, .92);
}

/* Le panneau deroulant des Creations garde son fond clair : ses liens
   doivent donc rester fonces, transparence ou non. */
#header.transparent .nav-dropdown a {
	color: var(--skila-foreground);
}

/* ---- Liste du Journal (gabarit home.php) ----
   Releve du prototype a 1440 px : banniere 90vh (600 px au minimum), titre
   96 px italique ; tuiles carrees jointives, trois par rangee, rubrique
   10.4 px interlettrage 0.4em, titre 36 px italique, sous-titre 14 px. */

.skila-j-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 90vh;
	min-height: 600px;
	background-color: #2a2622;
	background-size: cover;
	background-position: 50% 50%;
	text-align: center;
}

/* Le degrade fonce le haut et surtout le bas, ou se tient le texte. */
.skila-j-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,.3) 50%, rgba(0,0,0,.7));
}

.skila-j-hero-inner {
	position: relative;
	z-index: 1;
	padding: 0 1.5rem 6rem;
	max-width: 56rem;
}

.skila-j-eyebrow {
	margin: 0 0 1.5rem;
	font-family: Lato, system-ui, sans-serif;
	font-size: 12px;
	line-height: 1.35;
	letter-spacing: .4em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .8);
}

.skila-journal h1.skila-j-title {
	margin: 0;
	font-family: "Playfair Display", Georgia, serif;
	font-style: italic;
	font-weight: 400;
	font-size: clamp(3rem, 6.7vw, 6rem);
	line-height: 1.05;
	color: #fff;
	text-shadow: 0 10px 20px rgba(0, 0, 0, .25);
}

.skila-j-lead {
	margin: 2rem auto 0;
	max-width: 36rem;
	font-size: 18px;
	font-weight: 300;
	line-height: 1.55;
	color: rgba(255, 255, 255, .9);
}

.skila-j-social {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	margin: 2.5rem 0 0;
}

.skila-j-social a {
	display: inline-flex;
	color: rgba(255, 255, 255, .7);
	transition: color .2s ease;
}

.skila-j-social a:hover,
.skila-j-social a:focus-visible {
	color: #fff;
}

/* ---- La grille de tuiles ----
   Bord a bord et sans gouttiere, comme le prototype : la grille sort donc du
   conteneur centre de Flatsome. */

.skila-j-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 0;
}

/* Trois tuiles par rangee, exprimees sur six colonnes : la demi-colonne sert
   uniquement a centrer une rangee incomplete. Le nombre d articles varie au
   gre des publications du Client ; sans cela, la derniere rangee laissait un
   trou a droite. */
.skila-j-tile {
	grid-column: span 2;
}

/* Rangee finale de deux tuiles : elle demarre une demi-colonne plus loin. */
.skila-j-tile:nth-child(3n + 1):nth-last-child(2) {
	grid-column: 2 / span 2;
}

/* Rangee finale d une seule tuile : elle se place au centre. */
.skila-j-tile:nth-child(3n + 1):last-child {
	grid-column: 3 / span 2;
}

.skila-j-tile {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background-color: #cfc7bd;
}

.skila-j-link {
	position: absolute;
	inset: 0;
	display: block;
	color: inherit;
}

.skila-j-tile img.skila-j-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .7s ease;
}

/* Le prototype pose un voile a 30 %, mesure contre des visuels gris de
   remplacement. Sur nos photographies, claires, la rubrique et le sous-titre
   n y tenaient plus la lecture : le voile est porte a 45 %. Meme intention,
   valeur ajustee a la matiere reelle. */
.skila-j-veil {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .45);
	transition: background-color .5s ease;
}

.skila-j-link:hover .skila-j-img,
.skila-j-link:focus-visible .skila-j-img {
	transform: scale(1.05);
}

.skila-j-link:hover .skila-j-veil,
.skila-j-link:focus-visible .skila-j-veil {
	background: rgba(0, 0, 0, .55);
}

.skila-j-body {
	position: relative;
	z-index: 1;
	display: flex;
	height: 100%;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 2rem;
}

.skila-j-rubric {
	margin-bottom: 1rem;
	font-family: Lato, system-ui, sans-serif;
	font-size: 10.4px;
	line-height: 1.4;
	letter-spacing: .4em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .85);
	text-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}

.skila-journal h2.skila-j-name {
	margin: 0 0 .75rem;
	font-family: "Playfair Display", Georgia, serif;
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.875rem, 2.5vw, 2.25rem);
	line-height: 1.12;
	color: #fff;
	text-shadow: 0 4px 12px rgba(0, 0, 0, .3);
}

.skila-j-sub {
	max-width: 20rem;
	margin-bottom: 2rem;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.43;
	color: rgba(255, 255, 255, .92);
	text-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}

/* Le bouton n est pas un lien : toute la tuile l est deja. Un lien dans un
   lien serait du HTML invalide, et deux arrets au clavier pour une seule
   destination. */
.skila-j-button {
	display: inline-block;
	padding: .7rem 1.6rem;
	background: #fff;
	color: var(--skila-foreground);
	font-family: Lato, system-ui, sans-serif;
	font-size: 13px;
	letter-spacing: .05em;
	line-height: 1.2;
	transition: background-color .3s ease, color .3s ease;
}

.skila-j-link:hover .skila-j-button,
.skila-j-link:focus-visible .skila-j-button {
	background: var(--skila-accent);
	color: #fff;
}

.skila-j-link:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -6px;
}

.skila-j-pagination,
.skila-j-empty {
	padding: 3rem 1.5rem;
	text-align: center;
}

@media (max-width: 849px) {
	.skila-j-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	/* Deux tuiles par rangee ; la regle de centrage se recalcule sur deux. */
	.skila-j-tile:nth-child(3n + 1):nth-last-child(2),
	.skila-j-tile:nth-child(3n + 1):last-child {
		grid-column: span 2;
	}

	.skila-j-tile:nth-child(2n + 1):last-child {
		grid-column: 2 / span 2;
	}
}

@media (max-width: 549px) {
	.skila-j-grid {
		grid-template-columns: 1fr;
	}

	/* Une seule colonne : plus rien a centrer. */
	.skila-j-tile,
	.skila-j-tile:nth-child(3n + 1):nth-last-child(2),
	.skila-j-tile:nth-child(3n + 1):last-child,
	.skila-j-tile:nth-child(2n + 1):last-child {
		grid-column: auto;
	}

	.skila-j-hero {
		height: 70vh;
		min-height: 460px;
	}

	.skila-j-hero-inner {
		padding-bottom: 4rem;
	}
}

/* ---- Page Contact ---- */

.skila-contact-list {
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
}

.skila-contact-list li {
	margin: 0 0 1.5rem;
	color: var(--skila-muted-fg);
	line-height: 1.7;
}

.skila-contact-label {
	display: block;
	margin-bottom: .35rem;
	font-size: 11px;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--skila-accent);
}

.skila-contact-list a {
	color: var(--skila-muted-fg);
	border-bottom: 1px solid var(--skila-border);
	transition: color .2s ease, border-color .2s ease;
}

.skila-contact-list a:hover {
	color: var(--skila-accent);
	border-bottom-color: var(--skila-accent);
}

/* Formulaire */
.skila-contact-form label {
	display: block;
	margin-bottom: 1.25rem;
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--skila-muted-fg);
}

.skila-contact-form input[type="text"],
.skila-contact-form input[type="email"],
.skila-contact-form textarea {
	margin-top: .5rem;
	border: 1px solid var(--skila-border);
	border-radius: 2px;
	background: #fff;
	box-shadow: none;
	font-family: Lato, system-ui, sans-serif;
	font-size: .95rem;
	letter-spacing: normal;
	text-transform: none;
	color: var(--skila-foreground);
}

.skila-contact-form input:focus,
.skila-contact-form textarea:focus {
	border-color: var(--skila-accent);
	box-shadow: none;
}

.skila-contact-form textarea {
	min-height: 160px;
}

.skila-contact-form .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}

.skila-contact-form .wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	font-size: .8rem;
	letter-spacing: normal;
	text-transform: none;
	line-height: 1.5;
}

.skila-contact-form input[type="submit"] {
	margin-top: 1rem;
	padding: .8rem 2rem;
	border: 1px solid #2E006C;
	border-radius: 2px;
	background: #2E006C;
	color: #fff;
	font-family: Lato, system-ui, sans-serif;
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	min-height: 0;
}

.skila-contact-form input[type="submit"]:hover {
	background: transparent;
	color: #2E006C;
}

/* ---- Depliage d un paragraphe (etape Paris) ---- */

.skila-motion .skila-u-more {
	display: none;
}

.skila-u-expand.is-open .skila-u-more {
	display: block;
}

.skila-u-expand.is-open .skila-u-ellipsis {
	display: none;
}

.skila-u-toggle {
	padding: 0;
	border: none;
	background: none;
	color: var(--skila-accent);
	font-family: Lato, system-ui, sans-serif;
	font-size: 11px;
	letter-spacing: .24em;
	text-transform: uppercase;
	cursor: pointer;
	min-height: 0;
	border-bottom: 1px solid transparent;
	transition: border-color .2s ease;
}

.skila-u-toggle:hover,
.skila-u-toggle:focus-visible {
	background: none;
	color: var(--skila-accent);
	border-bottom-color: var(--skila-accent);
}

/* ---- Compte : connexion, inscription, mot de passe ---- */
/* Mesures relevées sur le prototype, docs/lovable src/pages/Compte.tsx :
   bloc centré de 400 px, surtitre 10 px / 0.3em, titre Playfair 36 px,
   onglets en pilule sur fond rgb(232,226,217), champs soulignés d'un filet
   rgba(50,36,27,.2) et bouton bordeaux plein arrondi.
   Le même gabarit sert la page Compte et la modale du header : les règles
   communes sont portées par .skila-auth, les écarts de la modale sont
   regroupés plus bas sous #login-form-popup. */

/* Flatsome enrobe la page Compte dans .page-wrapper.my-account.mb, qui pose
   ses propres marges. On les neutralise hors connexion pour que le rythme
   vertical vienne entièrement de .skila-auth. */
body.woocommerce-account:not(.logged-in) .page-wrapper.my-account {
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
}

/* Flatsome peint #wrapper et #main en blanc ; ailleurs les sections posent
   leur propre fond creme, ici rien ne le fait. On remet le creme sur les pages
   du compte uniquement, sans toucher au gabarit global. */
body.woocommerce-account #main {
	background-color: var(--skila-background);
}

/* 70 px sous l en-tete : c est l ecart du prototype (bandeau fixe de 58 px,
   surtitre a 128 px). Notre en-tete occupe le flux sur 66 px, la marge ne se
   reporte donc pas sur la hauteur du bandeau. */
.skila-auth {
	padding: 70px 0 80px;
}

.skila-auth-inner {
	max-width: 448px;
	margin: 0 auto;
	padding: 0 24px;
}

/* En-tête du bloc */

.skila-auth-head {
	margin-bottom: 40px;
	text-align: center;
}

.skila-auth-eyebrow {
	display: block;
	margin: 0 0 12px;
	font-family: Lato, system-ui, sans-serif;
	font-size: 10px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--skila-accent);
}

.skila-auth .skila-auth-title {
	margin: 0 0 12px;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 36px;
	font-weight: 400;
	line-height: 1.11;
	letter-spacing: 0;
	text-transform: none;
	color: var(--skila-foreground);
}

.skila-auth-sub {
	margin: 0;
	font-family: Lato, system-ui, sans-serif;
	font-size: 14px;
	line-height: 1.43;
	color: var(--skila-muted-fg);
}

/* Onglets Connexion / Créer un compte */

.skila-auth-tabs {
	display: flex;
	margin-bottom: 32px;
	padding: 4px;
	background: #E8E2D9;
	border-radius: 9999px;
}

.skila-auth .skila-auth-tab {
	flex: 1 1 0;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 10px 8px;
	border: 0;
	border-radius: 9999px;
	background: transparent;
	box-shadow: none;
	font-family: Lato, system-ui, sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.33;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--skila-muted-fg);
	cursor: pointer;
	transition: background-color .3s ease, color .3s ease, box-shadow .3s ease;
}

.skila-auth .skila-auth-tab:hover {
	color: var(--skila-foreground);
}

.skila-auth .skila-auth-tab[aria-selected="true"] {
	background: var(--skila-background);
	color: var(--skila-foreground);
	box-shadow: rgba(0, 0, 0, .05) 0 1px 2px 0;
}

/* Formulaires */

/* En colonne flex : l'écart de 20 px du prototype vient du gap, et le texte
   légal que WooCommerce injecte avant le bouton par le filtre
   woocommerce_register_form peut repasser dessous avec `order`. */
.skila-auth .skila-auth-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0;
}

.skila-auth .skila-field {
	margin: 0;
	padding: 0;
}

.skila-auth .skila-auth-form label {
	display: block;
	margin: 0 0 8px;
	font-family: Lato, system-ui, sans-serif;
	font-size: 10px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--skila-muted-fg);
}

.skila-auth .skila-auth-form input[type="text"],
.skila-auth .skila-auth-form input[type="email"],
.skila-auth .skila-auth-form input[type="password"] {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 10px 0;
	border: 0;
	border-bottom: 1px solid rgba(50, 36, 27, .2);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-family: Lato, system-ui, sans-serif;
	font-size: 14px;
	line-height: 1.43;
	color: var(--skila-foreground);
	transition: border-color .3s ease;
}

.skila-auth .skila-auth-form input[type="text"]:focus,
.skila-auth .skila-auth-form input[type="email"]:focus,
.skila-auth .skila-auth-form input[type="password"]:focus {
	border-bottom-color: var(--skila-foreground);
	box-shadow: none;
	outline: 0;
}

/* Prénom + Nom sur une ligne */
.skila-field-pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

/* Œil d'affichage du mot de passe */

.skila-pass {
	position: relative;
	display: block;
}

.skila-auth .skila-auth-form .skila-pass input {
	padding-right: 40px;
}

.skila-auth .skila-pass-toggle {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: var(--skila-muted-fg);
	box-shadow: none;
	cursor: pointer;
	transition: background-color .3s ease;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.skila-auth .skila-pass-toggle:hover {
	background-color: var(--skila-foreground);
}

.skila-auth .skila-pass-toggle.is-shown {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49'/%3E%3Cpath d='M14.084 14.158a3 3 0 0 1-4.242-4.242'/%3E%3Cpath d='M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143'/%3E%3Cpath d='m2 2 20 20'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49'/%3E%3Cpath d='M14.084 14.158a3 3 0 0 1-4.242-4.242'/%3E%3Cpath d='M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143'/%3E%3Cpath d='m2 2 20 20'/%3E%3C/svg%3E");
}

/* Ligne « Se souvenir de moi » / « Mot de passe oublié ? » */

.skila-auth .skila-auth-aside {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
}

.skila-auth .skila-auth-form label.skila-remember {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 11px;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	color: var(--skila-muted-fg);
	cursor: pointer;
}

.skila-auth .skila-remember input {
	width: auto;
	margin: 0;
	accent-color: var(--skila-primary);
}

.skila-auth-lost,
.skila-auth-back a {
	font-size: 11px;
	line-height: 1.5;
	color: var(--skila-muted-fg);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.skila-auth-lost:hover,
.skila-auth-back a:hover {
	color: var(--skila-foreground);
}

/* Bouton principal */

.skila-auth .skila-auth-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 0;
	margin: 0;
	padding: 14px 24px;
	border: 0;
	border-radius: 9999px;
	background: var(--skila-primary);
	box-shadow: none;
	font-family: Lato, system-ui, sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.33;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--skila-background);
	cursor: pointer;
	transition: background-color .3s ease;
}

.skila-auth .skila-auth-submit:hover {
	background: #A14554;
	color: var(--skila-background);
}

.skila-auth .skila-auth-submit::after {
	content: "";
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* Mentions légales et messages secondaires */

.skila-auth .woocommerce-privacy-policy-text {
	order: 10;
	margin-top: 12px;
}

.skila-auth .woocommerce-privacy-policy-text p,
.skila-auth-note,
.skila-auth-back {
	margin: 0;
	font-family: Lato, system-ui, sans-serif;
	font-size: 11px;
	line-height: 1.5;
	text-align: center;
	color: var(--skila-muted-fg);
}

.skila-auth .woocommerce-privacy-policy-text a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.skila-auth .woocommerce-privacy-policy-text a:hover {
	color: var(--skila-foreground);
}

/* Messages WooCommerce (erreur de connexion, email déjà pris…) */

/* WooCommerce imprime le conteneur meme sans message : sans :not(:empty) sa
   marge basse se fusionne avec celle du bloc et descend tout le contenu. */
.skila-auth .woocommerce-notices-wrapper:not(:empty) {
	margin-bottom: 24px;
}

.skila-auth .woocommerce-error,
.skila-auth .woocommerce-message,
.skila-auth .woocommerce-info {
	margin: 0 0 16px;
	padding: 14px 18px;
	border: 0;
	border-left: 2px solid var(--skila-primary);
	border-radius: 4px;
	background: #F1ECE4;
	list-style: none;
	font-family: Lato, system-ui, sans-serif;
	font-size: 13px;
	line-height: 1.5;
	color: var(--skila-foreground);
}

.skila-auth .woocommerce-error li,
.skila-auth .woocommerce-message li {
	margin: 0;
	list-style: none;
}

.skila-auth .woocommerce-error a,
.skila-auth .woocommerce-message a,
.skila-auth .woocommerce-info a {
	color: var(--skila-primary);
	text-decoration: underline;
}

/* Modale de connexion du header */

#login-form-popup.lightbox-content {
	max-width: 448px;
	padding: 0;
	border-radius: 8px;
	background: var(--skila-background);
	overflow: hidden;
}

#login-form-popup .skila-auth {
	padding: 40px 0;
}

#login-form-popup .skila-auth-inner {
	max-width: none;
	padding: 0 32px;
}

#login-form-popup .skila-auth .skila-auth-title {
	font-size: 30px;
}

/* Bandeau de titre une fois connecté */

.skila-account-header {
	padding: 70px 0 40px;
	text-align: center;
}

.skila-account-eyebrow {
	display: block;
	margin: 0 0 12px;
	font-family: Lato, system-ui, sans-serif;
	font-size: 10px;
	line-height: 1.5;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--skila-accent);
}

.skila-account-header h1.skila-account-title {
	margin: 0;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 36px;
	font-weight: 400;
	line-height: 1.11;
	letter-spacing: 0;
	text-transform: none;
	color: var(--skila-foreground);
}

@media only screen and (max-width: 549px) {
	.skila-auth {
		padding: 56px 0 64px;
	}

	.skila-auth .skila-auth-title {
		font-size: 30px;
	}

	.skila-field-pair {
		grid-template-columns: 1fr;
	}

	.skila-account-header {
		padding: 56px 0 32px;
	}
}

/* ---- Espace membre (client connecté) ---- */
/* La maquette ne dessine qu'un écran « connecté » symbolique (deux boutons).
   Un compte WooCommerce réel a besoin de commandes, d'adresses et de
   coordonnées : on garde donc les rubriques de WooCommerce, habillées avec la
   même grammaire que le bloc de connexion — surtitre violet, titre Playfair,
   filets fins, majuscules espacées. */

.skila-account {
	padding: 0 0 96px;
}

.skila-account-body {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 64px;
	max-width: 1008px;
	margin: 0 auto;
	padding: 0 24px;
}

/* Rubriques */

.skila-account-nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.skila-account-nav li {
	margin: 0;
	list-style: none;
	border-bottom: 1px solid var(--skila-border);
}

.skila-account-nav li:first-child {
	border-top: 1px solid var(--skila-border);
}

.skila-account-nav a {
	display: block;
	padding: 14px 0;
	font-family: Lato, system-ui, sans-serif;
	font-size: 11px;
	line-height: 1.5;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--skila-muted-fg);
	transition: color .3s ease;
}

.skila-account-nav a:hover {
	color: var(--skila-foreground);
}

.skila-account-nav .is-active > a,
.skila-account-nav .woocommerce-MyAccount-navigation-link--active > a {
	color: var(--skila-accent);
}

/* Accueil de l'espace membre */

.skila-dash-hello {
	margin: 0 0 32px;
	font-family: Lato, system-ui, sans-serif;
	font-size: 14px;
	line-height: 1.6;
	color: var(--skila-muted-fg);
}

.skila-dash-hello strong {
	font-weight: 600;
	color: var(--skila-foreground);
}

.skila-dash-links {
	display: grid;
	gap: 16px;
	margin-bottom: 32px;
}

.skila-dash-link {
	display: block;
	padding: 24px 28px;
	border: 1px solid var(--skila-border);
	border-radius: 12px;
	background: var(--skila-cream-dark);
	transition: border-color .3s ease, box-shadow .5s ease;
}

.skila-dash-link:hover {
	border-color: var(--skila-accent);
	box-shadow: rgba(71, 48, 31, .15) 0 8px 30px -8px;
}

.skila-dash-link-title {
	display: block;
	margin-bottom: 6px;
	font-family: Lato, system-ui, sans-serif;
	font-size: 12px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--skila-foreground);
}

.skila-dash-link-sub {
	display: block;
	font-family: Lato, system-ui, sans-serif;
	font-size: 13px;
	line-height: 1.5;
	color: var(--skila-muted-fg);
}

.skila-dash-logout {
	margin: 0;
}

.skila-dash-logout a {
	font-family: Lato, system-ui, sans-serif;
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--skila-muted-fg);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.skila-dash-logout a:hover {
	color: var(--skila-primary);
}

/* Contenu des rubriques : commandes, adresses, coordonnées */

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3,
.woocommerce-MyAccount-content legend {
	margin: 0 0 20px;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 22px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	color: var(--skila-foreground);
}

.woocommerce-MyAccount-content p {
	font-family: Lato, system-ui, sans-serif;
	font-size: 14px;
	line-height: 1.6;
	color: var(--skila-muted-fg);
}

.woocommerce-MyAccount-content a:not(.button):not(.skila-dash-link) {
	color: var(--skila-accent);
}

.woocommerce-MyAccount-content table {
	width: 100%;
	margin-bottom: 32px;
	border: 0;
	border-collapse: collapse;
	font-family: Lato, system-ui, sans-serif;
	font-size: 13px;
}

.woocommerce-MyAccount-content table th {
	padding: 0 12px 10px 0;
	border: 0;
	border-bottom: 1px solid var(--skila-border);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: .2em;
	text-transform: uppercase;
	text-align: left;
	color: var(--skila-muted-fg);
}

.woocommerce-MyAccount-content table td {
	padding: 14px 12px 14px 0;
	border: 0;
	border-bottom: 1px solid var(--skila-border);
	background: transparent;
	color: var(--skila-foreground);
}

/* Formulaires des rubriques : mêmes champs soulignés que la connexion */

.woocommerce-MyAccount-content form .form-row {
	margin: 0 0 20px;
	padding: 0;
}

.woocommerce-MyAccount-content form label {
	display: block;
	margin: 0 0 8px;
	font-family: Lato, system-ui, sans-serif;
	font-size: 10px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--skila-muted-fg);
}

.woocommerce-MyAccount-content form input[type="text"],
.woocommerce-MyAccount-content form input[type="email"],
.woocommerce-MyAccount-content form input[type="tel"],
.woocommerce-MyAccount-content form input[type="password"],
.woocommerce-MyAccount-content form select,
.woocommerce-MyAccount-content form .select2-container .select2-selection--single {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 10px 0;
	border: 0;
	border-bottom: 1px solid rgba(50, 36, 27, .2);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-family: Lato, system-ui, sans-serif;
	font-size: 14px;
	line-height: 1.43;
	color: var(--skila-foreground);
	transition: border-color .3s ease;
}

.woocommerce-MyAccount-content form input:focus,
.woocommerce-MyAccount-content form select:focus {
	border-bottom-color: var(--skila-foreground);
	box-shadow: none;
	outline: 0;
}

.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	margin: 0;
	padding: 14px 32px;
	border: 0;
	border-radius: 9999px;
	background: var(--skila-primary);
	box-shadow: none;
	font-family: Lato, system-ui, sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.33;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--skila-background);
	transition: background-color .3s ease;
}

.woocommerce-MyAccount-content .button:hover,
.woocommerce-MyAccount-content button[type="submit"]:hover {
	background: #A14554;
	color: var(--skila-background);
}

@media only screen and (max-width: 849px) {
	.skila-account-body {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

/* Rubriques du compte : finitions des formulaires WooCommerce */

/* Prénom / Nom : WooCommerce les flotte toutes deux à gauche, les deux filets
   se touchent et se lisent comme un seul. On rend la seconde colonne à droite
   pour rouvrir la gouttière. */
.woocommerce-MyAccount-content form .form-row-first {
	float: left;
	clear: both;
	width: 48%;
}

.woocommerce-MyAccount-content form .form-row-last {
	float: right;
	width: 48%;
}

.woocommerce-MyAccount-content form .clear {
	clear: both;
}

.woocommerce-MyAccount-content fieldset {
	margin: 32px 0 0;
	padding: 0;
	border: 0;
}

.woocommerce-MyAccount-content legend {
	width: 100%;
	padding: 0 0 12px;
	border-bottom: 1px solid var(--skila-border);
}

.woocommerce-MyAccount-content .required {
	color: var(--skila-primary);
	text-decoration: none;
	border: 0;
}

.woocommerce-MyAccount-content em,
.woocommerce-MyAccount-content .description,
.woocommerce-MyAccount-content span.description {
	display: block;
	margin-top: 6px;
	font-family: Lato, system-ui, sans-serif;
	font-size: 12px;
	font-style: normal;
	line-height: 1.5;
	color: var(--skila-muted-fg);
}

/* Œil de WooCommerce sur les champs de mot de passe : même traitement que le
   nôtre sur la page de connexion. */
.woocommerce-MyAccount-content .show-password-input {
	border: 0;
	background: transparent;
	color: var(--skila-muted-fg);
}

.woocommerce-MyAccount-content .show-password-input:hover {
	color: var(--skila-foreground);
}

/* Messages (« aucune commande », confirmation d'enregistrement…) */
.woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-MyAccount-content .woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	margin: 0 0 24px;
	padding: 20px 24px;
	border: 0;
	border-left: 2px solid var(--skila-primary);
	border-radius: 4px;
	background: var(--skila-cream-dark);
	list-style: none;
	font-family: Lato, system-ui, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: var(--skila-foreground);
}

.woocommerce-MyAccount-content .woocommerce-message .button,
.woocommerce-MyAccount-content .woocommerce-info .button {
	margin: 0;
	padding: 12px 24px;
	font-size: 11px;
}

/* Adresses : les deux colonnes de WooCommerce */
.woocommerce-MyAccount-content .woocommerce-Addresses {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
}

.woocommerce-MyAccount-content .woocommerce-Address {
	width: auto;
	float: none;
	padding: 24px 28px;
	border: 1px solid var(--skila-border);
	border-radius: 12px;
	background: var(--skila-cream-dark);
}

.woocommerce-MyAccount-content .woocommerce-Address address {
	margin: 0;
	font-family: Lato, system-ui, sans-serif;
	font-size: 14px;
	font-style: normal;
	line-height: 1.6;
	color: var(--skila-muted-fg);
}

/* Le lien « Ajouter » tient mal a cote du titre dans une colonne etroite : on
   l empile sous le titre plutot que de le laisser se casser en trois lignes. */
.woocommerce-MyAccount-content .woocommerce-Address-title {
	display: block;
}

.woocommerce-MyAccount-content .woocommerce-Address-title .edit {
	display: inline-block;
	margin-bottom: 14px;
}

.woocommerce-MyAccount-content .woocommerce-Address-title h2,
.woocommerce-MyAccount-content .woocommerce-Address-title h3 {
	margin: 0 0 8px;
	font-size: 18px;
}

.woocommerce-MyAccount-content .woocommerce-Address-title .edit {
	font-family: Lato, system-ui, sans-serif;
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--skila-accent);
}

@media only screen and (max-width: 849px) {
	.woocommerce-MyAccount-content .woocommerce-Addresses {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.woocommerce-MyAccount-content form .form-row-first,
	.woocommerce-MyAccount-content form .form-row-last {
		float: none;
		width: 100%;
	}
}

/* ---- Tunnel d'achat : panier, commande, favoris ---- */
/* Mesures relevées sur le prototype, docs/lovable src/pages/Panier.tsx et
   Favoris.tsx : fond crème, 102 px sous l'en-tête (pt-40 moins un bandeau fixe
   de 58 px), titre Playfair 48 px centré dont le second mot est en italique,
   48 px avant le contenu.
   La maquette ne dessine ni page de commande ni totaux : ces écrans reprennent
   la même grammaire (filets fins, majuscules espacées, bouton bordeaux plein)
   appliquée aux gabarits de WooCommerce. */

body.woocommerce-cart #main,
body.woocommerce-checkout #main,
body.skila-wishlist-page #main {
	background-color: var(--skila-background);
}

/* Le reglage « modele de page par defaut » vaut blank : il n y a pas de
   .page-wrapper sur ces pages, le rythme vertical se pose sur #main. */
body.woocommerce-cart #main,
body.woocommerce-checkout #main,
body.skila-wishlist-page #main {
	padding-top: 102px;
	padding-bottom: 80px;
}

/* Titre de page */

.skila-shop-head {
	margin-bottom: 48px;
	text-align: center;
}

.skila-shop-head .skila-shop-title {
	margin: 0;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 48px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	color: var(--skila-foreground);
}

.skila-shop-head .skila-shop-title em {
	font-style: italic;
}

/* Bouton plein, repris du bloc de connexion */

.skila-shop-button,
.woocommerce-cart .checkout-button,
.woocommerce-checkout #place_order {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 0;
	margin: 0;
	padding: 14px 32px;
	border: 0;
	border-radius: 9999px;
	background: var(--skila-primary);
	box-shadow: none;
	font-family: Lato, system-ui, sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.33;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--skila-background);
	transition: background-color .3s ease, opacity .3s ease;
}

.skila-shop-button:hover,
.woocommerce-cart .checkout-button:hover,
.woocommerce-checkout #place_order:hover {
	background: #A14554;
	color: var(--skila-background);
}

/* Un seul bouton plein par ecran : « Mettre a jour le panier » reste une
   action secondaire, en contour, comme « Poursuivre les achats ». WooCommerce
   le desactive tant que rien n a change, on garde ce signal en opacite. */
.woocommerce-cart table.cart td.actions .button[name="update_cart"][disabled] {
	opacity: .4;
}

/* État vide (panier, favoris) */

.skila-empty {
	padding: 80px 0;
	text-align: center;
}

.skila-empty-icon {
	display: block;
	margin: 0 auto 16px;
	color: var(--skila-muted-fg);
}

.skila-empty-text {
	margin: 0 0 24px;
	font-family: Lato, system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: var(--skila-muted-fg);
}

.skila-empty .return-to-shop {
	margin: 0;
}

/* ---- Panier ---- */

.woocommerce-cart .woocommerce.row {
	max-width: 1152px;
	margin-left: auto;
	margin-right: auto;
}

.woocommerce-cart table.cart {
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-family: Lato, system-ui, sans-serif;
}

.woocommerce-cart table.cart thead th {
	padding: 0 16px 12px 0;
	border: 0;
	border-bottom: 1px solid var(--skila-border);
	background: transparent;
	font-size: 10px;
	font-weight: 400;
	letter-spacing: .2em;
	text-transform: uppercase;
	text-align: left;
	color: var(--skila-muted-fg);
}

.woocommerce-cart table.cart tbody td {
	padding: 20px 16px 20px 0;
	border: 0;
	border-bottom: 1px solid rgba(50, 36, 27, .1);
	background: transparent;
	vertical-align: middle;
	font-size: 14px;
	color: var(--skila-foreground);
}

.woocommerce-cart table.cart td.product-remove {
	width: 40px;
	padding-right: 8px;
}

.woocommerce-cart table.cart td.product-remove .remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: transparent;
	font-size: 18px;
	line-height: 1;
	color: var(--skila-muted-fg);
	transition: background-color .3s ease, color .3s ease;
}

.woocommerce-cart table.cart td.product-remove .remove:hover {
	background: var(--skila-cream-dark);
	color: var(--skila-primary);
}

/* 96 px de vignette plus 20 px de gouttiere. Sans min-width, la repartition
   automatique du tableau ne reserve que la place du contenu et le max-width:100%
   de Flatsome rabote l image a 45 px de large pour 96 de haut. */
.woocommerce-cart table.cart td.product-thumbnail {
	width: 116px;
	min-width: 116px;
	max-width: none;
	padding-right: 20px;
}

.woocommerce-cart table.cart td.product-thumbnail img {
	width: 96px;
	max-width: none;
	height: 96px;
	border-radius: 2px;
	object-fit: cover;
}

.woocommerce-cart table.cart td.product-name a {
	font-family: "Playfair Display", Georgia, serif;
	font-size: 18px;
	font-style: italic;
	line-height: 1.3;
	color: var(--skila-foreground);
}

.woocommerce-cart table.cart td.product-name a:hover {
	color: var(--skila-accent);
}

.woocommerce-cart table.cart td.product-name {
	width: 40%;
}

.woocommerce-cart table.cart td.product-price,
.woocommerce-cart table.cart td.product-subtotal,
.woocommerce-cart table.cart thead th.product-price,
.woocommerce-cart table.cart thead th.product-subtotal,
.woocommerce-cart table.cart thead th.product-quantity {
	white-space: nowrap;
}

.woocommerce-cart table.cart td.actions .button-continue-shopping,
.woocommerce-cart table.cart td.actions .button[name="update_cart"] {
	white-space: nowrap;
}

.woocommerce-cart table.cart td.product-subtotal {
	text-align: right;
	padding-right: 0;
}

.woocommerce-cart table.cart thead th.product-subtotal {
	text-align: right;
	padding-right: 0;
}

/* Compteur de quantité en pilule, comme la maquette */
.woocommerce-cart table.cart td.product-quantity .quantity {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 2px 6px;
	border: 1px solid rgba(50, 36, 27, .15);
	border-radius: 9999px;
	background: transparent;
}

.woocommerce-cart table.cart td.product-quantity .quantity input.qty {
	width: 36px;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 4px 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	font-family: Lato, system-ui, sans-serif;
	font-size: 14px;
	text-align: center;
	color: var(--skila-foreground);
}

.woocommerce-cart table.cart td.product-quantity .quantity .minus,
.woocommerce-cart table.cart td.product-quantity .quantity .plus {
	width: 24px;
	height: 24px;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	font-size: 14px;
	line-height: 1;
	color: var(--skila-muted-fg);
	transition: color .3s ease;
}

.woocommerce-cart table.cart td.product-quantity .quantity .minus:hover,
.woocommerce-cart table.cart td.product-quantity .quantity .plus:hover {
	background: transparent;
	color: var(--skila-accent);
}

/* La barre d actions est une cellule a colspan=6 : lui donner display:flex la
   sort du calcul de largeur du tableau et elle se retracte sur son contenu.
   On la laisse donc en table-cell et on compte sur les flottants que Flatsome
   pose deja sur les deux boutons. */
.woocommerce-cart table.cart td.actions {
	padding: 32px 0 0;
	border: 0;
	text-align: left;
}

.woocommerce-cart table.cart td.actions::after {
	content: "";
	display: block;
	clear: both;
}

.woocommerce-cart table.cart td.actions .continue-shopping {
	margin-right: 16px;
}

.woocommerce-cart table.cart td.actions .button-continue-shopping,
.woocommerce-cart table.cart td.actions .button[name="update_cart"],
.woocommerce-cart .continue-shopping .button {
	min-height: 0;
	margin: 0;
	padding: 14px 24px;
	border: 1px solid var(--skila-border);
	border-radius: 9999px;
	background: transparent;
	box-shadow: none;
	font-family: Lato, system-ui, sans-serif;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--skila-muted-fg);
	transition: border-color .3s ease, color .3s ease;
}

.woocommerce-cart table.cart td.actions .button-continue-shopping:hover,
.woocommerce-cart table.cart td.actions .button[name="update_cart"]:hover,
.woocommerce-cart .continue-shopping .button:hover {
	border-color: var(--skila-foreground);
	background: transparent;
	color: var(--skila-foreground);
}

/* Totaux */

.woocommerce-cart .cart-collaterals .cart_totals {
	padding: 28px 32px;
	border: 1px solid var(--skila-border);
	border-radius: 12px;
	background: var(--skila-cream-dark);
}

/* Flatsome masque le h2 « Total panier » de WooCommerce et pose ses propres
   widget-title. On les aligne sur les en-tetes de colonnes du tableau plutot
   que sur un titre Playfair : meme graisse, meme interlettrage. */
.woocommerce-cart .cart-sidebar .widget-title,
.woocommerce-cart .cart_totals .widget-title {
	display: block;
	margin: 0 0 16px;
	font-family: Lato, system-ui, sans-serif;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--skila-muted-fg);
}

.woocommerce-cart .cart_totals table {
	width: 100%;
	margin: 0 0 24px;
	border: 0;
	border-collapse: collapse;
	font-family: Lato, system-ui, sans-serif;
	font-size: 14px;
}

.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
	padding: 12px 0;
	border: 0;
	border-bottom: 1px solid var(--skila-border);
	background: transparent;
	vertical-align: top;
	color: var(--skila-foreground);
}

.woocommerce-cart .cart_totals table th {
	font-size: 10px;
	font-weight: 400;
	letter-spacing: .2em;
	text-transform: uppercase;
	text-align: left;
	color: var(--skila-muted-fg);
}

.woocommerce-cart .cart_totals table td {
	text-align: right;
}

.woocommerce-cart .cart_totals .woocommerce-shipping-destination,
.woocommerce-cart .cart_totals .shipping-calculator-button,
.woocommerce-cart .cart_totals p {
	margin: 8px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--skila-muted-fg);
}

.woocommerce-cart .cart_totals .shipping-calculator-button {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
	border-bottom: 0;
	font-size: 16px;
	color: var(--skila-foreground);
}

.woocommerce-cart .cart_totals .wc-proceed-to-checkout {
	padding: 0;
}

.woocommerce-cart .checkout-button {
	display: flex;
	width: 100%;
}

/* Code promo */

.woocommerce-cart .cart-sidebar .coupon,
.woocommerce-cart .cart-collaterals .coupon {
	margin-top: 24px;
}

.woocommerce-cart .coupon input[type="text"] {
	width: 100%;
	height: auto;
	margin: 0 0 12px;
	padding: 10px 0;
	border: 0;
	border-bottom: 1px solid rgba(50, 36, 27, .2);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-family: Lato, system-ui, sans-serif;
	font-size: 14px;
	color: var(--skila-foreground);
}

.woocommerce-cart .coupon button {
	width: 100%;
	min-height: 0;
	padding: 12px 24px;
	border: 1px solid var(--skila-border);
	border-radius: 9999px;
	background: transparent;
	box-shadow: none;
	font-family: Lato, system-ui, sans-serif;
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--skila-muted-fg);
}

.woocommerce-cart .coupon button:hover {
	border-color: var(--skila-foreground);
	background: transparent;
	color: var(--skila-foreground);
}

/* ---- Commande ---- */

.woocommerce-checkout .woocommerce > form.checkout,
.woocommerce-checkout .woocommerce .skila-shop-head,
.woocommerce-checkout .woocommerce > .woocommerce-form-coupon-toggle,
.woocommerce-checkout .woocommerce > .checkout_coupon,
.woocommerce-checkout .woocommerce-order {
	max-width: 1152px;
	margin-left: auto;
	margin-right: auto;
}

/* Flatsome pose un filet gris de 2 px au-dessus du bloc de facturation, seul
   de son espece sur la page. On le retire. */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields {
	border-top: 0;
	padding-top: 0;
}

/* Porte sur .woocommerce : `.woocommerce-checkout` est une classe de corps,
   sans ce garde-fou la regle attrapait aussi les titres du pied de page. */
.woocommerce-checkout .woocommerce #customer_details h3,
.woocommerce-checkout .woocommerce #order_review_heading,
.woocommerce-checkout .woocommerce .woocommerce-shipping-fields h3,
.woocommerce-checkout .woocommerce .woocommerce-additional-fields h3 {
	margin: 0 0 24px;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 22px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	color: var(--skila-foreground);
}

.woocommerce-checkout .woocommerce-billing-fields label,
.woocommerce-checkout .woocommerce-shipping-fields label,
.woocommerce-checkout .woocommerce-additional-fields label {
	display: block;
	margin: 0 0 8px;
	font-family: Lato, system-ui, sans-serif;
	font-size: 10px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--skila-muted-fg);
}

.woocommerce-checkout form .form-row input[type="text"],
.woocommerce-checkout form .form-row input[type="email"],
.woocommerce-checkout form .form-row input[type="tel"],
.woocommerce-checkout form .form-row input[type="password"],
.woocommerce-checkout form .form-row textarea,
.woocommerce-checkout form .form-row select,
.woocommerce-checkout form .form-row .select2-container .select2-selection--single {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 10px 0;
	border: 0;
	border-bottom: 1px solid rgba(50, 36, 27, .2);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-family: Lato, system-ui, sans-serif;
	font-size: 14px;
	line-height: 1.43;
	color: var(--skila-foreground);
	transition: border-color .3s ease;
}

.woocommerce-checkout form .form-row textarea {
	min-height: 96px;
	resize: vertical;
}

.woocommerce-checkout form .form-row input:focus,
.woocommerce-checkout form .form-row textarea:focus,
.woocommerce-checkout form .form-row select:focus {
	border-bottom-color: var(--skila-foreground);
	box-shadow: none;
	outline: 0;
}

.woocommerce-checkout .required {
	color: var(--skila-primary);
	border: 0;
	text-decoration: none;
}

/* Récapitulatif */

/* Flatsome encadre la colonne de droite d un filet violet de 2 px : la carte
   est deja dessinee par #order_review, on retire le second encadrement. */
.woocommerce-checkout .col-inner.has-border {
	border: 0;
	padding: 0;
}

.woocommerce-checkout #order_review {
	padding: 28px 32px;
	border: 1px solid var(--skila-border);
	border-radius: 12px;
	background: var(--skila-cream-dark);
}

.woocommerce-checkout #order_review table.shop_table {
	width: 100%;
	margin: 0 0 24px;
	border: 0;
	border-collapse: collapse;
	font-family: Lato, system-ui, sans-serif;
	font-size: 14px;
}

.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td {
	padding: 12px 0;
	border: 0;
	border-bottom: 1px solid var(--skila-border);
	background: transparent;
	color: var(--skila-foreground);
}

.woocommerce-checkout #order_review table.shop_table thead th {
	font-size: 10px;
	font-weight: 400;
	letter-spacing: .2em;
	text-transform: uppercase;
	text-align: left;
	color: var(--skila-muted-fg);
}

.woocommerce-checkout #order_review table.shop_table thead th:last-child,
.woocommerce-checkout #order_review table.shop_table td:last-child,
.woocommerce-checkout #order_review table.shop_table tfoot td {
	text-align: right;
}

.woocommerce-checkout #order_review table.shop_table tfoot th {
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	text-align: left;
	color: var(--skila-muted-fg);
}

.woocommerce-checkout #order_review .order-total th,
.woocommerce-checkout #order_review .order-total td {
	border-bottom: 0;
	font-size: 16px;
	color: var(--skila-foreground);
}

.woocommerce-checkout #payment {
	border: 0;
	border-radius: 0;
	background: transparent;
}

.woocommerce-checkout #payment ul.payment_methods {
	margin: 0 0 20px;
	padding: 0;
	border: 0;
	list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li {
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
	font-family: Lato, system-ui, sans-serif;
	font-size: 14px;
}

.woocommerce-checkout #payment .woocommerce-notice,
.woocommerce-checkout #payment .woocommerce-info {
	margin: 0 0 20px;
	padding: 16px 20px;
	border: 0;
	border-left: 2px solid var(--skila-primary);
	border-radius: 4px;
	background: var(--skila-background);
	font-family: Lato, system-ui, sans-serif;
	font-size: 13px;
	line-height: 1.5;
	color: var(--skila-foreground);
}

.woocommerce-checkout #place_order {
	display: flex;
	width: 100%;
}

.woocommerce-checkout .woocommerce-privacy-policy-text p,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
	margin: 16px 0 0;
	font-family: Lato, system-ui, sans-serif;
	font-size: 11px;
	line-height: 1.5;
	color: var(--skila-muted-fg);
}

.woocommerce-checkout .woocommerce-privacy-policy-text a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Bandeau « code promo » au-dessus du formulaire */

.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
	margin: 0 0 32px;
	padding: 16px 20px;
	border: 0;
	border-left: 2px solid var(--skila-accent);
	border-radius: 4px;
	background: var(--skila-cream-dark);
	font-family: Lato, system-ui, sans-serif;
	font-size: 13px;
	color: var(--skila-foreground);
}

/* ---- Commande confirmée ---- */

/* Flatsome met la colonne de droite dans un panneau gris (.is-well) : avec le
   bandeau de confirmation et la carte de recapitulatif, cela fait trois boites
   imbriquees. On laisse les deux boites internes porter le dessin. */
.woocommerce-order .is-well {
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

.woocommerce-order .woocommerce-thankyou-order-received,
.woocommerce-order .woocommerce-notice--success {
	margin: 0 0 32px;
	padding: 20px 24px;
	border: 0;
	border-left: 2px solid var(--skila-accent);
	border-radius: 4px;
	background: var(--skila-cream-dark);
	font-family: Lato, system-ui, sans-serif;
	font-size: 15px;
	color: var(--skila-foreground);
}

.woocommerce-order ul.woocommerce-order-overview {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	margin: 0 0 40px;
	padding: 24px 32px;
	border: 1px solid var(--skila-border);
	border-radius: 12px;
	list-style: none;
}

.woocommerce-order ul.woocommerce-order-overview li {
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
	font-family: Lato, system-ui, sans-serif;
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--skila-muted-fg);
}

.woocommerce-order ul.woocommerce-order-overview li strong {
	display: block;
	margin-top: 6px;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--skila-foreground);
}

.woocommerce-order table.shop_table,
.woocommerce-order .woocommerce-customer-details table {
	width: 100%;
	margin: 0 0 32px;
	border: 0;
	border-collapse: collapse;
	font-family: Lato, system-ui, sans-serif;
	font-size: 14px;
}

.woocommerce-order table.shop_table th,
.woocommerce-order table.shop_table td {
	padding: 12px 0;
	border: 0;
	border-bottom: 1px solid var(--skila-border);
	background: transparent;
	text-align: left;
	color: var(--skila-foreground);
}

.woocommerce-order table.shop_table thead th {
	font-size: 10px;
	font-weight: 400;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--skila-muted-fg);
}

.woocommerce-order table.shop_table td:last-child,
.woocommerce-order table.shop_table th:last-child {
	text-align: right;
}

/* ---- Favoris ---- */
/* YITH rend un tableau ; la maquette veut une grille de vignettes. On
   redéclare l'affichage des éléments du tableau plutôt que de recopier les
   664 lignes de wishlist-view.php, qui bougent à chaque mise à jour. */

body.skila-wishlist-page .wishlist-title-container,
body.skila-wishlist-page #yith-wcwl-form,
body.skila-wishlist-page .woocommerce {
	max-width: 1152px;
	margin-left: auto;
	margin-right: auto;
}

body.skila-wishlist-page .wishlist-title h2 {
	display: none;
}

body.skila-wishlist-page .hidden-title-form,
body.skila-wishlist-page .wishlist_table thead,
body.skila-wishlist-page .wishlist-title .show-title-form {
	display: none;
}

body.skila-wishlist-page table.wishlist_table {
	display: block;
	width: 100%;
	margin: 0;
	border: 0;
	background: transparent;
}

body.skila-wishlist-page table.wishlist_table tbody {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

body.skila-wishlist-page table.wishlist_table tbody tr {
	position: relative;
	display: block;
	border: 0;
	background: transparent;
}

body.skila-wishlist-page table.wishlist_table tbody td {
	display: block;
	width: auto;
	padding: 0;
	border: 0;
	background: transparent;
	text-align: left;
}

/* flatsome-shop.css borne toute td.product-thumbnail a max-width:90px : sans
   lever ce plafond, la vignette reste a 90 px dans une carte de 270. */
body.skila-wishlist-page table.wishlist_table td.product-thumbnail {
	width: 100%;
	max-width: none;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	border-radius: 2px;
	background: var(--skila-cream-dark);
}

/* YITH enveloppe la vignette dans un <a> en ligne : sans lui donner le bloc,
   l image se cale sur sa largeur propre et flotte dans une case trois fois
   plus large. */
body.skila-wishlist-page table.wishlist_table td.product-thumbnail a {
	display: block;
	width: 100%;
	height: 100%;
}

body.skila-wishlist-page table.wishlist_table td.product-thumbnail img {
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	transition: transform .7s ease;
}

body.skila-wishlist-page table.wishlist_table tbody tr:hover td.product-thumbnail img {
	transform: scale(1.05);
}

body.skila-wishlist-page table.wishlist_table td.product-name {
	margin-top: 12px;
}

body.skila-wishlist-page table.wishlist_table td.product-name a {
	font-family: "Playfair Display", Georgia, serif;
	font-size: 14px;
	line-height: 1.3;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--skila-foreground);
}

body.skila-wishlist-page table.wishlist_table td.product-price {
	margin-top: 6px;
	font-family: Lato, system-ui, sans-serif;
	font-size: 13px;
	color: var(--skila-muted-fg);
}

body.skila-wishlist-page table.wishlist_table td.product-stock-status {
	margin-top: 4px;
	font-family: Lato, system-ui, sans-serif;
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--skila-muted-fg);
}

body.skila-wishlist-page table.wishlist_table td.product-add-to-cart {
	margin-top: 12px;
}

body.skila-wishlist-page table.wishlist_table td.product-add-to-cart a {
	display: block;
	padding: 12px 16px;
	border: 1px solid #2E006C;
	border-radius: 9999px;
	background: #2E006C;
	font-family: Lato, system-ui, sans-serif;
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	text-align: center;
	color: var(--skila-background);
	transition: background-color .3s ease;
}

body.skila-wishlist-page table.wishlist_table td.product-add-to-cart a:hover {
	background: #1A0040;
	color: var(--skila-background);
}

/* Croix de retrait, posée sur la vignette */
body.skila-wishlist-page table.wishlist_table td.product-remove {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	margin: 0;
}

body.skila-wishlist-page table.wishlist_table td.product-remove a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	box-shadow: rgba(71, 48, 31, .15) 0 2px 6px -2px;
	font-size: 14px;
	line-height: 1;
	color: var(--skila-foreground);
}

body.skila-wishlist-page table.wishlist_table td.product-remove a:hover {
	background: #fff;
	color: var(--skila-primary);
}

/* Lignes de service : message vide, pagination. YITH ne leur pose pas de
   classe, mais les lignes de produit portent un id yith-wcwl-row-N : c est le
   seul repere stable pour les distinguer. */
body.skila-wishlist-page table.wishlist_table tbody tr:not([id]) {
	grid-column: 1 / -1;
}

body.skila-wishlist-page table.wishlist_table td.wishlist-empty {
	padding: 80px 0;
	font-family: Lato, system-ui, sans-serif;
	font-size: 16px;
	text-align: center;
	color: var(--skila-muted-fg);
}

@media only screen and (max-width: 849px) {
	body.woocommerce-cart #main,
	body.woocommerce-checkout #main,
	body.skila-wishlist-page #main {
		padding-top: 72px;
		padding-bottom: 64px;
	}

	.skila-shop-head .skila-shop-title {
		font-size: 36px;
	}

	.skila-shop-head {
		margin-bottom: 32px;
	}

	body.skila-wishlist-page table.wishlist_table tbody {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}

	.woocommerce-cart .cart-wrapper .actions {
		justify-content: center;
	}
}

/* ---- Correctifs de recette ---- */

/* Journal : Flatsome enrobe l'index dans .page-wrapper, qui pose 30 px de
   marge haute et basse. Cela glissait une bande blanche entre l'en-tête et la
   bannière, puis entre la grille et le pied de page. Le prototype colle la
   bannière sous l'en-tête et la grille au pied. */
.page-wrapper.skila-journal {
	padding-top: 0;
	padding-bottom: 0;
}

/* Article du Journal : la signature « par <auteur> » reste vide — le seul
   compte du site est celui de l'administrateur, dont le nom public est son
   adresse e-mail. On retire la mention tant que le client n'a pas choisi une
   signature de publication. */
.single-post .entry-header .byline,
.single-post .entry-meta .byline {
	display: none;
}

/* ---- Page 404 ---- */

body.error404 #main {
	padding: 70px 0 96px;
	background-color: var(--skila-background);
}

body.error404 .page-wrapper {
	padding-top: 0;
	padding-bottom: 0;
}

body.error404 .large-12 {
	max-width: 640px;
	margin: 0 auto;
	float: none;
	text-align: center;
}

body.error404 .page-title,
body.error404 .is-xlarge {
	display: block;
	margin: 0 0 8px;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 72px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	color: var(--skila-accent);
}

body.error404 h1 {
	margin: 0 0 12px;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 32px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	color: var(--skila-foreground);
}

body.error404 p {
	margin: 0 0 28px;
	font-family: Lato, system-ui, sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: var(--skila-muted-fg);
}

body.error404 .searchform,
body.error404 form[role="search"] {
	max-width: 420px;
	margin: 0 auto 28px;
}

body.error404 .searchform input[type="search"],
body.error404 .searchform input[type="text"] {
	width: 100%;
	height: auto;
	padding: 10px 0;
	border: 0;
	border-bottom: 1px solid rgba(50, 36, 27, .2);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-family: Lato, system-ui, sans-serif;
	font-size: 14px;
	color: var(--skila-foreground);
}

body.error404 .searchform button,
body.error404 .searchform .submit-button,
body.error404 form[role="search"] button {
	min-height: 0;
	padding: 0 8px;
	border: 0;
	border-bottom: 1px solid rgba(50, 36, 27, .2);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--skila-muted-fg);
}

body.error404 .searchform button:hover {
	background: transparent;
	color: var(--skila-foreground);
}

body.error404 .skila-404-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

body.error404 .skila-404-actions .skila-shop-button {
	display: inline-flex;
}

body.error404 .skila-404-actions .skila-404-secondary {
	padding: 14px 24px;
	border: 1px solid var(--skila-border);
	border-radius: 9999px;
	font-family: Lato, system-ui, sans-serif;
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--skila-muted-fg);
	transition: border-color .3s ease, color .3s ease;
}

body.error404 .skila-404-actions .skila-404-secondary:hover {
	border-color: var(--skila-foreground);
	color: var(--skila-foreground);
}

/* ---- Correctifs design d octobre 2026 ---- */

/* ---- Prix sur la carte produit ---- */
/* Discret, sous le titre : Lato, petit, brun doux. Flatsome pose sur .amount
   un gras et une couleur quasi noire ; on les neutralise. */
.skila-card .price {
	display: block;
	margin: 6px 0 0;
	font-family: Lato, system-ui, sans-serif;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: .04em;
	color: var(--skila-muted-fg);
}

.skila-card .price .amount,
.skila-card .price bdi {
	font-weight: 400;
	color: inherit;
}

.skila-card .price del {
	margin-right: 6px;
	opacity: .6;
}

.skila-card .price ins {
	text-decoration: none;
}

/* ---- Pages legales (confidentialite, retours) ---- */
/* Le gabarit de page par defaut est « blank » : ni titre ni conteneur, le
   texte courait d un bord a l autre. Colonne de lecture de 760 px, titre
   repris des ecrans du tunnel (skila_shop_title). */
body.skila-legal-page #main {
	padding: 102px 0 96px;
	background-color: var(--skila-background);
}

body.skila-legal-page .skila-legal-head,
body.skila-legal-page #content {
	max-width: 808px; /* 760 px de texte + 2 x 24 px de gouttiere */
	margin: 0 auto;
	padding: 0 24px;
}

body.skila-legal-page #content {
	font-family: Lato, system-ui, sans-serif;
	font-size: 15px;
	line-height: 1.75;
	color: rgba(50, 36, 27, .85);
}

body.skila-legal-page #content h2 {
	margin: 48px 0 16px;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 26px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	color: var(--skila-foreground);
}

body.skila-legal-page #content h3 {
	margin: 32px 0 12px;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 20px;
	font-weight: 400;
	font-style: italic;
	text-transform: none;
	color: var(--skila-foreground);
}

body.skila-legal-page #content > h2:first-child,
body.skila-legal-page #content > p:first-child {
	margin-top: 0;
}

body.skila-legal-page #content p,
body.skila-legal-page #content ul,
body.skila-legal-page #content ol {
	margin: 0 0 16px;
}

body.skila-legal-page #content ul,
body.skila-legal-page #content ol {
	padding-left: 1.25em;
}

body.skila-legal-page #content li {
	margin-bottom: 6px;
}

body.skila-legal-page #content a {
	color: var(--skila-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 549px) {
	body.skila-legal-page #main {
		padding: 56px 0 64px;
	}

	body.skila-legal-page .skila-shop-head .skila-shop-title {
		font-size: 36px;
		line-height: 1.15;
	}

	body.skila-legal-page #content h2 {
		margin-top: 36px;
		font-size: 22px;
	}
}

/* ---- Fiche produit (woocommerce/content-single-product.php) ---- */
/* Mesures du prototype (Produit.tsx) : fond #FDFCFB, conteneur max-w-6xl et
   px-6, pt-40 sous un bandeau fixe de 58 px, grille 6 / 6 avec 64 px de
   gouttiere, gris « stone » de Tailwind pour les petites capitales. */
body.single-product #main {
	background-color: #FDFCFB;
}

.skila-product-inner {
	max-width: 1152px;
	margin: 0 auto;
	padding: 100px 24px 80px;
}

.skila-product-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 32px;
	font-family: Lato, system-ui, sans-serif;
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #78716C;
	transition: color .3s ease;
}

.skila-product-back:hover,
.skila-product-back:focus-visible {
	color: #292524;
}

.skila-product-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
	align-items: start;
}

@media (min-width: 1024px) {
	.skila-product-grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: 64px;
	}

	.skila-pgallery,
	.skila-product-details {
		grid-column: span 6;
	}
}

/* Galerie : image carree, trois vignettes */
.skila-pgallery {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

/* Carre strict : le prototype bornait aussi la hauteur a 70vh, ce qui
   ecrasait le carre sur un ecran bas. On garde le carre. */
.skila-pgallery-main {
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #F5F5F4;
}

.skila-pgallery-main img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
	transition: opacity .2s ease, transform .7s ease;
}

.skila-pgallery-main:hover img {
	transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
	.skila-pgallery-main img,
	.skila-card-image img {
		transition: none;
	}

	.skila-pgallery-main:hover img,
	.skila-card:hover .skila-card-image img {
		transform: none;
	}
}

.skila-pgallery-thumbs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.skila-pgallery-thumb {
	display: block;
	width: 100%;
	min-height: 0;
	aspect-ratio: 1 / 1;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid transparent;
	border-radius: 0;
	background: none;
	opacity: .6;
	transition: opacity .2s ease;
}

.skila-pgallery-thumb:hover {
	opacity: 1;
}

.skila-pgallery-thumb.is-active {
	padding: 2px;
	border-color: #292524;
	opacity: 1;
}

.skila-pgallery-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Colonne de details */
.skila-product-details {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.skila-product-intro {
	margin-bottom: 32px;
}

.skila-product-eyebrow {
	display: block;
	margin-bottom: 12px;
	font-family: Lato, system-ui, sans-serif;
	font-size: 11px;
	letter-spacing: .25em;
	text-transform: uppercase;
	color: #A8A29E;
}

.skila-product .skila-product-title {
	margin: 0 0 16px;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 48px;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: none;
	color: #1C1917;
}

@media (min-width: 850px) {
	.skila-product .skila-product-title {
		font-size: 60px;
	}
}

/* Prix : ajout au prototype (choix client), tenu discret. */
.skila-product-price {
	margin-bottom: 24px;
}

.skila-product-price .price {
	margin: 0;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 22px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--skila-foreground);
}

.skila-product-price .price .amount,
.skila-product-price .price bdi {
	font-weight: 400;
	color: inherit;
}

.skila-product-price .price del {
	margin-right: 8px;
	font-size: .8em;
	opacity: .5;
}

.skila-product-price .price ins {
	text-decoration: none;
}

.skila-product-desc,
.skila-product-desc p {
	font-family: Lato, system-ui, sans-serif;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.625;
	color: #57534E;
}

.skila-product-desc p {
	margin: 0 0 12px;
}

.skila-product-desc p:last-child {
	margin-bottom: 0;
}

/* Composition : description courte decoupee sur « / » */
.skila-product-composition {
	margin-bottom: 40px;
	padding-top: 32px;
	border-top: 1px solid #F5F5F4;
}

.skila-product .skila-product-label {
	margin: 0 0 20px;
	font-family: Lato, system-ui, sans-serif;
	font-size: 11px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #A8A29E;
}

.skila-product-composition ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.skila-product-composition li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin: 0 0 12px;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 18px;
	font-style: italic;
	line-height: 1.55;
	color: #44403C;
}

.skila-product-composition li:last-child {
	margin-bottom: 0;
}

.skila-product-fill {
	flex: 1;
	height: 1px;
	margin: 0 16px;
	background: #F5F5F4;
}

/* Ajout au panier + favori */
/* Rangee bouton + coeur. Le colis de .skila-product-cart s efface
   (display: contents) pour que tout ce que WooCommerce et les extensions
   impriment apres le formulaire (boutons Apple Pay / Google Pay / Link de
   Stripe, mention de stock...) passe sur sa propre ligne pleine largeur
   sous le bouton, au lieu d etirer le coeur ou d ecraser le bouton. */
.skila-product-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 24px;
}

.skila-product-cart {
	display: contents;
}

.skila-product-cart > * {
	order: 3;
	flex: 0 0 100%;
	width: 100%;
	min-width: 0;
}

.skila-product-cart > form.cart,
.skila-product-cart > .stock {
	order: 1;
	flex: 1 1 0;
	width: auto;
}

.skila-product-wishlist {
	order: 2;
}

.skila-product-cart form.cart {
	display: flex;
	margin: 0;
}

/* Paiement express Stripe : marges du module neutralisees, la rangee a son
   propre ecart. */
.skila-product-cart > #wc-stripe-express-checkout-element,
.skila-product-cart > #wc-stripe-express-checkout-button-separator {
	margin: 0 !important;
}

.skila-product-cart .quantity.hidden {
	display: none;
}

.skila-product-cart .single_add_to_cart_button,
.skila-product-cart .single_add_to_cart_button.alt {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	min-height: 0;
	margin: 0;
	padding: 20px 32px;
	border: 0;
	border-radius: 0;
	background: #2E006C;
	box-shadow: none;
	font-family: Lato, system-ui, sans-serif;
	font-size: 11px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #fff;
	transition: opacity .3s ease;
}

.skila-product-cart .single_add_to_cart_button:hover,
.skila-product-cart .single_add_to_cart_button:focus-visible {
	background: #2E006C;
	color: #fff;
	opacity: .9;
}

/* Pictogramme sac (lucide ShoppingBag), en masque pour suivre currentColor */
.skila-product-cart .single_add_to_cart_button::before {
	content: "";
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Rupture de stock : WooCommerce remplace le formulaire par une mention */
.skila-product-cart .stock {
	margin: 0;
	padding: 20px 0;
	font-family: Lato, system-ui, sans-serif;
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #78716C;
}

/* Coeur : bouton carre de 64 px, filet gris, trait fin */
.skila-product-wishlist {
	display: flex;
	flex: 0 0 64px;
}

.skila-product-wishlist .yith-wcwl-add-to-wishlist,
.skila-product-wishlist .yith-wcwl-add-button,
.skila-product-wishlist .yith-wcwl-wishlistaddedbrowse,
.skila-product-wishlist .yith-wcwl-wishlistexistsbrowse {
	display: flex;
	width: 100%;
	margin: 0;
}

.skila-product-wishlist .skila-heart {
	width: 100%;
	height: auto;
	min-height: 58px;
	border: 1px solid #E7E5E4;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: #44403C;
	transition: border-color .3s ease, background-color .3s ease, color .3s ease;
}

.skila-product-wishlist .skila-heart:hover {
	border-color: #A8A29E;
	background: transparent;
	color: #44403C;
}

.skila-product-wishlist .skila-heart.is-added,
.skila-product-wishlist .skila-heart.is-added:hover {
	border-color: #D92644;
	background: #D92644;
	color: #fff;
}

.skila-product-wishlist .skila-heart-icon {
	width: 18px;
	height: 18px;
	stroke-width: 1;
}

.skila-product-wishlist .feedback,
.skila-product-wishlist .separator,
.skila-product-wishlist .view-wishlist,
.skila-product-wishlist .yith-wcwl-tooltip {
	display: none;
}

.skila-product-note {
	margin: 0;
	font-family: Lato, system-ui, sans-serif;
	font-size: 11px;
	font-style: italic;
	color: #A8A29E;
}

@media (max-width: 849px) {
	.skila-product-inner {
		padding-top: 48px;
		padding-bottom: 64px;
	}

	.skila-product-back {
		margin-bottom: 24px;
	}
}

/* ---- Fenetres modales (js/modal.js) ---- */
/* Grammaire du prototype (AuthPromptDialog.tsx, modales du pied de page) :
   voile noir a 70 % floute, carte creme max-w-md, centree ; titre Playfair
   violet, mot en italique ; bouton plein et action secondaire soulignee. */
.skila-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(0, 0, 0, .7);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity .2s ease;
}

.skila-modal.is-open {
	opacity: 1;
}

.skila-modal-dialog {
	position: relative;
	width: 100%;
	max-width: 448px;
	padding: 40px 32px 32px;
	border-radius: 2px;
	background: var(--skila-background);
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
	text-align: center;
	color: var(--skila-foreground);
	transform: translateY(16px);
	transition: transform .3s ease;
}

.skila-modal.is-open .skila-modal-dialog {
	transform: none;
}

.skila-modal-close {
	position: absolute;
	top: 12px;
	right: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: rgba(46, 0, 108, .6);
	transition: color .2s ease;
}

.skila-modal-close:hover,
.skila-modal-close:focus-visible {
	background: none;
	color: #2E006C;
}

.skila-modal-eyebrow {
	display: block;
	margin-bottom: 12px;
	font-family: Lato, system-ui, sans-serif;
	font-size: 10px;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: #A88B5E;
}

.skila-modal .skila-modal-title {
	margin: 0 0 12px;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 30px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	color: #2E006C;
}

.skila-modal-title em {
	font-style: italic;
}

.skila-modal-text {
	margin: 0 0 28px;
	font-family: Lato, system-ui, sans-serif;
	font-size: 14px;
	line-height: 1.625;
	color: var(--skila-muted-fg);
}

.skila-modal-actions {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.skila-modal-confirm {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 14px 24px;
	border-radius: 9999px;
	background: #2E006C;
	font-family: Lato, system-ui, sans-serif;
	font-size: 12px;
	line-height: 1.33;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #fff;
	transition: background-color .3s ease;
}

/* Le focus est pose sur ce bouton a l ouverture : seul le survol change la
   teinte, le focus se lit au contour. */
.skila-modal-confirm:hover {
	background: #672EB8;
	color: #fff;
}

.skila-modal-confirm:focus-visible {
	color: #fff;
}

.skila-modal-cancel {
	align-self: center;
	min-height: 0;
	margin: 0;
	padding: 4px 8px;
	border: 0;
	background: none;
	font-family: Lato, system-ui, sans-serif;
	font-size: 11px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: .2em;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 4px;
	color: var(--skila-muted-fg);
	transition: color .2s ease;
}

.skila-modal-cancel:hover,
.skila-modal-cancel:focus-visible {
	background: none;
	color: var(--skila-foreground);
}

.skila-modal :focus-visible {
	outline: 2px solid #672EB8;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.skila-modal,
	.skila-modal-dialog {
		transition: none;
	}
}

/* Repere glisse dans le message d ajout au panier : jamais visible. */
.skila-added {
	display: none;
}

/* ---- En-tete : panier en icone sac, aligne sur le coeur des Favoris ---- */
/* functions.php impose l icone seule (theme_mod_cart_icon*). Les deux liens
   n ont pas les memes classes chez Flatsome (le panier est .nav-top-link
   .is-small, le coeur non) : on fixe taille et couleur pour les deux, en
   en-tete bureau comme mobile. */
#header .header-wishlist-icon > a,
#header .cart-item > a.header-cart-link {
	display: flex;
	align-items: center;
	color: rgba(50, 36, 27, .75);
	transition: color .2s ease;
}

#header .header-wishlist-icon > a:hover,
#header .cart-item > a.header-cart-link:hover {
	color: var(--skila-foreground);
}

#header .header-wishlist-icon i,
#header .cart-item i.icon-shopping-bag {
	font-size: 20px;
	line-height: 1;
	color: inherit;
}

/* Pastille du compteur : meme dessin pour les deux, violet de la marque. */
#header .header-wishlist-icon [data-icon-label]::after,
#header .cart-item [data-icon-label]::after {
	top: -8px;
	right: -10px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	background-color: #2E006C;
	box-shadow: none;
	font-family: Lato, system-ui, sans-serif !important;
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
	letter-spacing: 0;
	opacity: 1;
}

/* En-tete transparent (accueil) : coeur et sac passent en blanc ensemble,
   la pastille garde le violet. */
#header.transparent .header-wishlist-icon > a,
#header.transparent .cart-item > a.header-cart-link,
#header.transparent .header-wishlist-icon i,
#header.transparent .cart-item i.icon-shopping-bag {
	color: rgba(255, 255, 255, .92);
}

#header.transparent .header-wishlist-icon > a:hover,
#header.transparent .cart-item > a.header-cart-link:hover,
#header.transparent .header-wishlist-icon > a:hover i,
#header.transparent .cart-item > a.header-cart-link:hover i {
	color: #fff;
}

/* Deconnexion sans JavaScript (?skila-logout=1) : message et vrai lien. */
.skila-logout-noscript {
	margin: 0 0 32px;
	padding: 24px;
	border: 1px solid var(--skila-border);
	text-align: center;
}

.skila-logout-noscript p {
	margin: 0 0 16px;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 22px;
	color: #2E006C;
}

/* Fiche : YITH pose sur son bouton une marge basse de 16 px qui etirait la
   rangee (bouton 74 px au lieu de 56). Le coeur suit la hauteur du bouton. */
.skila-product .skila-product-wishlist .yith-wcwl-add-to-wishlist .yith-wcwl-add-button,
.skila-product .skila-product-wishlist .yith-wcwl-add-to-wishlist .yith-wcwl-wishlistaddedbrowse,
.skila-product .skila-product-wishlist .yith-wcwl-add-to-wishlist .yith-wcwl-wishlistexistsbrowse {
	display: flex;
	flex: 1;
	margin: 0;
}

.skila-product .skila-product-wishlist .skila-heart {
	height: auto;
	min-height: 56px;
}