/*
Theme Name: V&V Vision & Verdict
Theme URI: https://vv.garytech.cloud
Author: V&V
Description: Thème block sur mesure pour V&V — Vision & Verdict, opticien à Sidi Maârouf, Casablanca. Compatible WooCommerce.
Version: 0.2.1
Requires at least: 6.5
Requires PHP: 7.4
License: Proprietary
Text Domain: vv
*/

/* ---------- Base ---------- */
:root {
	--vv-ink: var(--wp--preset--color--ink);
	--vv-paper: var(--wp--preset--color--paper);
	--vv-ecaille: var(--wp--preset--color--ecaille);
	--vv-verre: var(--wp--preset--color--verre);
	--vv-mist: var(--wp--preset--color--mist);
	--vv-gutter: clamp(16px, 4vw, 48px);
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--vv-ecaille);
	outline-offset: 3px;
}

/* ---------- Header ---------- */
.vv-header { border-bottom: 1px solid var(--vv-mist); position: sticky; top: 0; z-index: 50; background: var(--vv-paper); }
.vv-wordmark { font-stretch: 125%; font-weight: 800; letter-spacing: -0.02em; text-decoration: none; }
.vv-wordmark a { text-decoration: none; color: inherit; }
.vv-header .wp-block-navigation a { text-decoration: none; }
.vv-header .wp-block-navigation a:hover { color: var(--vv-ecaille); }

/* ---------- Hero : la planche de lecture ---------- */
.vv-hero { position: relative; overflow: hidden; }
.vv-chart { margin: 0; line-height: 0.86; }
.vv-chart > * { margin: 0 !important; font-stretch: 125%; letter-spacing: 0.04em; }
.vv-chart .l1 { font-size: clamp(5.5rem, 21vw, 15rem); font-weight: 800; letter-spacing: -0.01em; }
.vv-chart .l2 { font-size: clamp(2.6rem, 10vw, 7.2rem); font-weight: 700; }
.vv-chart .l3 { font-size: clamp(1.7rem, 6.2vw, 4.4rem); font-weight: 600; }
.vv-chart .l4 { font-size: clamp(1.05rem, 3.2vw, 2.2rem); font-weight: 500; letter-spacing: 0.22em; color: var(--vv-ecaille); }
.vv-chart .l5 { font-size: clamp(.8rem, 1.6vw, 1.1rem); font-weight: 500; letter-spacing: 0.32em; opacity: .55; line-height: 1.6; }
.vv-chart .l1, .vv-chart .l2, .vv-chart .l3 { padding-bottom: .08em; }
.vv-hero-aside { border-left: 2px solid var(--vv-ink); padding-left: 1.25rem; }
.vv-hero-aside p { max-width: 34ch; }

@media (prefers-reduced-motion: no-preference) {
	.vv-chart > * { animation: vv-focus 1.1s cubic-bezier(.2,.7,.2,1) both; }
	.vv-chart .l2 { animation-delay: .08s; }
	.vv-chart .l3 { animation-delay: .16s; }
	.vv-chart .l4 { animation-delay: .24s; }
	.vv-chart .l5 { animation-delay: .32s; }
	@keyframes vv-focus { from { filter: blur(10px); opacity: .25; } to { filter: blur(0); opacity: 1; } }
	.vv-chart .l5 { animation-name: vv-focus-soft; }
	@keyframes vv-focus-soft { from { filter: blur(10px); opacity: 0; } to { filter: blur(0); opacity: .55; } }
}

/* ---------- Boutons ---------- */
.wp-block-button__link { transition: background-color .15s ease, color .15s ease; }
.is-style-outline > .wp-block-button__link { border-width: 2px; }
.vv-wa .wp-block-button__link::before {
	content: ""; display: inline-block; width: 1.05em; height: 1.05em; margin-right: .5em; vertical-align: -0.15em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2Zm0 18.2a8.2 8.2 0 0 1-4.2-1.1l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2Zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8s-.4-.1-.6.1-.7.8-.8 1-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.3-.4.2-.4.7-1.3a.4.4 0 0 0 0-.4l-.8-1.9c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.2 5.2 0 0 0 1.1 2.7 11.8 11.8 0 0 0 4.5 4c1.7.7 2.3.8 3.2.6a2.7 2.7 0 0 0 1.8-1.3 2.2 2.2 0 0 0 .2-1.3c-.1-.1-.3-.2-.5-.3Z'/%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'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2Zm0 18.2a8.2 8.2 0 0 1-4.2-1.1l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2Zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8s-.4-.1-.6.1-.7.8-.8 1-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.3-.4.2-.4.7-1.3a.4.4 0 0 0 0-.4l-.8-1.9c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.2 5.2 0 0 0 1.1 2.7 11.8 11.8 0 0 0 4.5 4c1.7.7 2.3.8 3.2.6a2.7 2.7 0 0 0 1.8-1.3 2.2 2.2 0 0 0 .2-1.3c-.1-.1-.3-.2-.5-.3Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- Choisir par forme ---------- */
.vv-shapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0; border-top: 1px solid var(--vv-ink); border-left: 1px solid var(--vv-ink); }
.vv-shape { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; padding: 1.5rem 1.25rem; border-right: 1px solid var(--vv-ink); border-bottom: 1px solid var(--vv-ink); color: var(--vv-ink); text-decoration: none; background: var(--vv-paper); transition: background-color .15s ease; }
.vv-shape svg { width: 100%; max-width: 150px; height: auto; stroke: currentColor; fill: none; stroke-width: 3; }
.vv-shape .vv-shape-name { font-weight: 700; font-size: 1.1rem; font-stretch: 110%; }
.vv-shape .vv-shape-hint { font-size: .85rem; opacity: .7; }
.vv-shape:hover { background: var(--vv-verre); }

/* ---------- Atelier ---------- */
.vv-atelier { background: var(--vv-ink); color: var(--vv-paper); }
.vv-atelier a { color: var(--vv-paper); }
.vv-service { border-top: 1px solid rgba(246,247,245,.25); padding-top: 1rem; }
.vv-service h3 { font-stretch: 112%; }

/* ---------- Étapes de commande ---------- */
.vv-steps { counter-reset: vvstep; }
.vv-step { counter-increment: vvstep; position: relative; padding-top: 3.25rem; }
.vv-step::before { content: counter(vvstep); position: absolute; top: 0; left: 0; font-weight: 800; font-stretch: 125%; font-size: 2.4rem; line-height: 1; color: var(--vv-ecaille); }

/* ---------- Mesure (52□18 140) ---------- */
.vv-mesure { font-feature-settings: "tnum" 1; letter-spacing: .02em; }

/* ---------- WooCommerce ---------- */
.woocommerce ul.products li.product, .wc-block-grid__product, .wc-block-product { text-align: left; }
.woocommerce ul.products li.product a img { background: var(--vv-mist); aspect-ratio: 1 / 1; object-fit: cover; border-radius: 6px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 1rem; font-weight: 600; padding-top: .75rem; }
.woocommerce ul.products li.product .price { color: var(--vv-ink); font-weight: 700; font-size: 1rem; }
.woocommerce ul.products li.product .button,
.woocommerce a.button, .woocommerce button.button, .woocommerce .button.alt,
.wc-block-components-button:not(.is-link) {
	background: var(--vv-ink) !important; color: var(--vv-paper) !important; border-radius: 999px !important; font-weight: 600; padding: .7em 1.3em !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover { background: var(--vv-ecaille) !important; }
.woocommerce span.onsale { background: var(--vv-ecaille); border-radius: 999px; min-height: auto; line-height: 1; padding: .5em .8em; }

/* ---------- Bouton WhatsApp flottant ---------- */
.vv-wa-float { position: fixed; right: 16px; bottom: 16px; z-index: 60; width: 56px; height: 56px; border-radius: 50%; background: #1f8f4e; display: grid; place-items: center; box-shadow: 0 6px 20px rgba(27,42,58,.25); }
.vv-wa-float svg { width: 28px; height: 28px; fill: #fff; }
.vv-wa-float span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Footer ---------- */
.vv-footer { border-top: 1px solid var(--vv-ink); }
.vv-footer a { text-decoration: none; }
.vv-footer a:hover { text-decoration: underline; }

/* ---------- FAQ ---------- */
.wp-block-details { border-bottom: 1px solid var(--vv-mist); padding: 1rem 0; }
.wp-block-details summary { font-weight: 600; cursor: pointer; }

@media (max-width: 781px) {
	.vv-hero-aside { border-left: 0; border-top: 2px solid var(--vv-ink); padding-left: 0; padding-top: 1.25rem; }
}

/* ---------- Fiche produit ---------- */
.vv-reassurance { list-style: none; padding: 1rem 0 0; margin: 1rem 0; border-top: 1px solid var(--vv-mist); font-size: .95rem; }
.vv-reassurance li { padding-left: 1.5rem; position: relative; margin: .35rem 0; }
.vv-reassurance li::before { content: ""; position: absolute; left: 0; top: .45em; width: .7rem; height: .7rem; border: 2px solid var(--vv-ecaille); border-radius: 50%; }
.woocommerce a.button.vv-wa-btn { background: #1f8f4e !important; }
.woocommerce a.button.vv-wa-btn:hover { background: #17733e !important; }
.vv-wa-product { margin-top: .75rem; }
.vv-tryon-cta { margin-top: .75rem; }
.woocommerce a.button.vv-tryon-btn { background: transparent !important; color: var(--vv-ink) !important; border: 2px solid var(--vv-ink) !important; }
.woocommerce a.button.vv-tryon-btn:hover { background: var(--vv-verre) !important; }

/* ---------- Hero 3D ---------- */
main.wp-block-group:has(> .vv-hero3d) { margin-top: 0; }
.vv-hero3d { position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-block-start: 0 !important; height: min(88vh, 860px); min-height: 560px; background: #13202E; color: var(--vv-paper); overflow: hidden; }
.vv-hero3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vv-hero3d:not(.is-3d)::before { content: attr(data-word); position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; font-stretch: 125%; font-size: min(22vw, 260px); color: rgba(246,247,245,.35); filter: blur(10px); }
.vv-hero3d-copy { position: absolute; left: var(--vv-gutter); bottom: clamp(24px, 5vw, 56px); max-width: 560px; z-index: 2; }
.vv-hero3d-copy h1 { margin: 0 0 .75rem; font-size: clamp(2.2rem, 4.4vw, 3.4rem); font-weight: 800; font-stretch: 125%; line-height: 1; color: var(--vv-paper); }
.vv-hero3d-copy h1 span { display: block; margin-top: .35rem; font-size: .42em; font-weight: 500; font-stretch: 100%; color: var(--vv-verre); }
.vv-hero3d-copy p { max-width: 44ch; color: rgba(246,247,245,.85); margin: 0; }
.vv-hero3d-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.vv-cta { display: inline-flex; align-items: center; min-height: 48px; padding: .8em 1.4em; border-radius: 999px; background: var(--vv-paper); color: var(--vv-ink); font-weight: 600; text-decoration: none; border: 2px solid var(--vv-paper); transition: background-color .15s ease, color .15s ease; }
.vv-cta:hover { background: #C49A6C; border-color: #C49A6C; color: var(--vv-ink); }
.vv-cta-ghost { background: transparent; color: var(--vv-paper); border-color: rgba(246,247,245,.7); }
.vv-cta-ghost:hover { background: rgba(246,247,245,.12); color: var(--vv-paper); border-color: var(--vv-paper); }
.vv-hero3d-hint { position: absolute; right: var(--vv-gutter); bottom: clamp(24px, 5vw, 56px); margin: 0; font-size: .85rem; opacity: .7; z-index: 2; }
@media (hover: none), (max-width: 781px) { .vv-hero3d-hint { display: none; } }
@media (max-width: 781px) { .vv-hero3d { height: 92vh; } .vv-hero3d-copy { right: var(--vv-gutter); } }

/* ---------- Cartes produits 3D ---------- */
.vv-tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .2s ease-out; transform-style: preserve-3d; will-change: transform; }
.vv-tilt a img { box-shadow: 0 18px 30px -18px rgba(19,32,46,.45); }

.is-layout-constrained > .vv-hero3d { max-width: none !important; width: 100vw; margin-left: calc(50% - 50vw) !important; margin-right: 0 !important; }
.vv-hero3d-copy { max-width: 440px; }
.vv-hero3d-copy h1 { font-size: clamp(2rem, 3.6vw, 2.9rem); }
.vv-hero3d-copy p { font-size: 1rem; }