/* Diwan Reem — compléments au theme.json */

/* ---------- Arche (arc outrepassé, motif signature) ---------- */
.is-style-arche img,
.wp-block-cover.is-style-arche,
.diwan-arche img {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 125' preserveAspectRatio='none'%3E%3Cpath d='M6 125V73.7A50 50 0 1 1 94 73.7V125Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 125' preserveAspectRatio='none'%3E%3Cpath d='M6 125V73.7A50 50 0 1 1 94 73.7V125Z'/%3E%3C/svg%3E");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}
.is-style-arche img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	width: 100%;
}
.is-style-arche {
	position: relative;
}
/* Fin filet champagne qui suit l'arche */
.is-style-arche::after {
	content: "";
	position: absolute;
	inset: -10px;
	pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 125' preserveAspectRatio='none'%3E%3Cpath d='M6 125V73.7A50 50 0 1 1 94 73.7V125' fill='none' stroke='%23CCAF98' stroke-width='0.35' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

/* ---------- Vers en arabe ---------- */
.is-style-vers,
p[lang="ar"] {
	font-family: var(--wp--preset--font-family--amiri);
	direction: rtl;
	unicode-bidi: isolate;
	text-align: center;
	font-size: clamp(1.25rem, 3.5vw, 1.6rem);
	line-height: 2;
	color: var(--wp--preset--color--bronze);
}
.has-nuit-background-color .is-style-vers,
.has-nuit-background-color p[lang="ar"] {
	color: var(--wp--preset--color--champagne);
}
p[lang="ar"]:empty {
	display: none;
}

/* ---------- Surtitres / petites capitales ---------- */
.diwan-surtitre {
	font-size: 0.75rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gris-chaud);
}

/* ---------- Pastilles WooCommerce (taille, couleur) ---------- */
.wc-block-product-filter-chips .wc-block-product-filter-chips__item,
.wp-block-woocommerce-product-filter-chips button {
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--gris-chaud);
	background: transparent;
	color: var(--wp--preset--color--nuit);
	min-height: 44px;
	min-width: 44px;
}
.wc-block-product-filter-chips [aria-checked="true"],
.wc-block-product-filter-chips [aria-pressed="true"],
.wp-block-woocommerce-product-filter-chips button[aria-checked="true"] {
	border-color: var(--wp--preset--color--nuit);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--nuit);
}
/* Option indisponible : barrée et non sélectionnable */
.wc-block-product-filter-chips [aria-disabled="true"],
.wc-block-product-filter-chips [disabled],
.wp-block-woocommerce-product-filter-chips button[disabled] {
	text-decoration: line-through;
	opacity: 0.45;
	cursor: not-allowed;
}

/* ---------- Couleurs épuisées + M'avertir ---------- */
.diwan-epuisees__titre {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--gris-chaud);
	margin: 0 0 0.5rem;
}
.diwan-epuisees__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.diwan-epuisees__liste a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0 1rem;
	border: 1px dashed var(--wp--preset--color--gris-chaud);
	border-radius: 999px;
	color: var(--wp--preset--color--gris-chaud);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--small);
}
.diwan-epuisees__liste s {
	color: var(--wp--preset--color--gris-chaud);
}
.diwan-epuisees__alerte {
	color: var(--wp--preset--color--zellige);
	font-weight: 500;
}

/* ---------- Lien « Une question sur ce modèle ? » ---------- */
.diwan-question-whatsapp a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--wp--preset--color--zellige);
	text-decoration: none;
	min-height: 44px;
}
.diwan-question-whatsapp a span {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- Bouton WhatsApp fixe ---------- */
.diwan-whatsapp-fixe {
	position: fixed;
	right: 16px;
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	z-index: 90;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--zellige);
	color: var(--wp--preset--color--blanc);
	box-shadow: 0 4px 14px rgba(22, 16, 27, 0.18);
}
.diwan-whatsapp-fixe:hover,
.diwan-whatsapp-fixe:focus-visible {
	background: var(--wp--preset--color--nuit);
	color: var(--wp--preset--color--blanc);
}
[dir="rtl"] .diwan-whatsapp-fixe {
	right: auto;
	left: 16px;
}

/* ---------- Grille produits : 2 colonnes sur mobile ---------- */
@media (max-width: 781px) {
	.wc-block-product-template.is-flex-container,
	.wc-block-product-template__responsive,
	.wp-block-woocommerce-product-template {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 1.5rem 12px !important;
	}
	.wc-block-product-template > li {
		width: auto !important;
		margin: 0 !important;
	}
}
.wc-block-product-template .wp-block-post-title {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: 1.25rem !important;
	font-weight: 500;
}
.wc-block-product-template .wp-block-post-title a {
	color: var(--wp--preset--color--nuit);
	text-decoration: none;
}

/* ---------- Photos produit ---------- */
.wc-block-components-product-image img,
.wp-block-woocommerce-product-image img,
.woocommerce-product-gallery img {
	background: var(--wp--preset--color--perle);
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/* ---------- Animations légères ---------- */
@media (prefers-reduced-motion: no-preference) {
	.wc-block-components-product-image,
	.wp-block-woocommerce-product-image {
		overflow: hidden;
	}
	.wc-block-components-product-image img,
	.wp-block-woocommerce-product-image img {
		transition: transform 0.8s ease;
	}
	.wc-block-components-product-image:hover img,
	.wp-block-woocommerce-product-image:hover img {
		transform: scale(1.03);
	}
	.diwan-fondu {
		animation: diwan-fondu 0.9s ease both;
	}
	@keyframes diwan-fondu {
		from { opacity: 0; transform: translateY(8px); }
		to { opacity: 1; transform: none; }
	}
}

/* ---------- Bandeau réassurance ---------- */
.diwan-reassurance p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.04em;
}

/* ---------- Accessibilité : focus visible ---------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--bronze);
	outline-offset: 3px;
}

/* ---------- En-tête : menu à gauche, logo centré, panier à droite ---------- */
.diwan-entete__barre {
	display: grid !important;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
}
.diwan-entete__barre > .wp-block-woocommerce-mini-cart {
	justify-self: end;
}
.diwan-entete__logo {
	margin: 0 !important;
}
@media (max-width: 599px) {
	.diwan-entete__logo img {
		width: 120px !important;
	}
}

/* Menu : hamburger sous 1100 px (le menu complet ne tient pas à côté du logo centré) */
.diwan-entete .wp-block-navigation__container {
	white-space: nowrap;
	gap: 1.75rem;
}
@media (max-width: 1099px) {
	.diwan-entete .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}
	.diwan-entete .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none !important;
	}
}

/* ---------- Fiche produit : nom arabe, ligne taille, description ---------- */
p.diwan-nom-arabe[lang="ar"] {
	margin-top: 0.25rem;
	text-align: left;
	font-size: clamp(1.4rem, 4vw, 1.75rem);
	line-height: 1.6;
}
.diwan-ligne-taille {
	font-size: 0.875rem;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--nuit);
}
/* Fiche : « Une seule pièce disponible » (stock = 1) */
.diwan-une-piece {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0.35rem 0 0 !important;
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--bronze);
}
.diwan-une-piece::before {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}
/* Fiche : « Cette pièce dans une autre taille ? Écrivez-nous » */
.diwan-autre-taille {
	margin: 0.35rem 0 0 !important;
	font-size: 0.85rem;
}
.diwan-autre-taille a {
	color: var(--wp--preset--color--nuit);
	text-underline-offset: 0.2em;
}
/* Échange de taille, sous la ligne de taille de la fiche */
.diwan-echange-ligne {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0.35rem 0 0;
	font-size: 0.85rem;
	color: var(--wp--preset--color--zellige);
}
.diwan-echange-ligne::before {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M8 3 4 7l4 4'/><path d='M4 7h16'/><path d='m16 21 4-4-4-4'/><path d='M20 17H4'/></svg>") center / contain no-repeat;
	mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M8 3 4 7l4 4'/><path d='M4 7h16'/><path d='m16 21 4-4-4-4'/><path d='M20 17H4'/></svg>") center / contain no-repeat;
}
.wp-block-post-excerpt[lang="ar"] {
	font-family: var(--wp--preset--font-family--amiri);
	font-size: 1.125rem;
	line-height: 1.9;
	text-align: right;
}
.diwan-description {
	border-top: 1px solid var(--wp--preset--color--perle-profond);
	padding-top: var(--wp--preset--spacing--40);
}
.diwan-engagement__titre a {
	color: inherit;
	text-decoration: none;
}
.diwan-engagement__titre a:hover,
.diwan-engagement__titre a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ---------- Page de remerciement : confirmation WhatsApp ---------- */
.diwan-merci-whatsapp {
	margin: var(--wp--preset--spacing--40) 0;
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--perle-profond);
	text-align: center;
}
.diwan-merci-whatsapp__texte {
	margin: 0 0 0.75rem;
}
.diwan-merci-whatsapp .diwan-merci-whatsapp__bouton {
	box-sizing: border-box;
	white-space: normal;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	width: 100%;
	max-width: 420px;
	background: var(--wp--preset--color--zellige);
	color: var(--wp--preset--color--perle);
	font-size: 0.9375rem;
	text-decoration: none;
}
.diwan-merci-whatsapp .diwan-merci-whatsapp__bouton:hover,
.diwan-merci-whatsapp .diwan-merci-whatsapp__bouton:focus-visible {
	color: var(--wp--preset--color--perle);
	filter: brightness(1.1);
}

/* ---------- Galerie des fiches : icône loupe (toucher la photo ouvre le plein écran) ---------- */
.woocommerce-product-gallery {
	position: relative;
}
.woocommerce-product-gallery:not(:has(.woocommerce-product-gallery__trigger))::before {
	content: "";
	position: absolute;
	top: 0.875rem;
	right: 0.875rem;
	z-index: 9;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--wp--preset--color--perle) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316101B' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m20 20-4.6-4.6'/%3E%3C/svg%3E") center / 18px no-repeat;
	box-shadow: 0 1px 4px rgba(22, 16, 27, 0.18);
	pointer-events: none;
}
.woocommerce-product-gallery__image a {
	cursor: zoom-in;
}

/* Pied de page : tout centré sur mobile (les colonnes sont empilées) */
@media (max-width: 781px) {
	footer.wp-block-template-part {
		text-align: center;
	}
	/* Espace sous la dernière ligne, dans le fond du pied de page : la bulle WhatsApp ne la cache plus */
	footer.wp-block-template-part > .wp-block-group.has-background {
		padding-bottom: calc(var(--wp--preset--spacing--40) + 64px) !important;
	}
	footer.wp-block-template-part .wp-block-image {
		margin-left: auto;
		margin-right: auto;
	}
	footer.wp-block-template-part .wp-block-image img {
		margin: 0 auto;
	}
	footer.wp-block-template-part .is-layout-flex {
		flex-direction: column;
		align-items: center;
		justify-content: center !important;
		gap: 0.35rem;
	}
	footer.wp-block-template-part .is-layout-flex > p {
		margin: 0;
	}
}