/*
 * Novatis — gabarits single (fiche produit WooCommerce, article de blog).
 *
 * Chargé uniquement sur ces vues (functions.php), après uploads/novatis/site.css.
 * Le CSS de WooCommerce y est retiré : ce fichier fournit la MISE EN PAGE
 * (grille galerie + résumé, méta, description). Le DESIGN (polices, tailles,
 * couleurs) vient du package importé (woocommerce.css de la démo, intégré à
 * site.css) : les règles visuelles ci-dessous sont volontairement de
 * spécificité plus faible (ou en :where()) pour que la démo l'emporte toujours.
 *
 * --nv-single-accent : couleur d'accent de la démo, détectée à l'import.
 */

:root { --nv-single-accent: #111; }

.nv-wc-single {
	--nv-line: rgba(17, 17, 17, .12);
	background: #fff;
	color: #111;
}

/* Fil d'Ariane / retour --------------------------------------------------- */
.nv-wc-crumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding-top: 28px;
	padding-bottom: 28px;
	font-size: 10px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: rgba(17, 17, 17, .5);
}
.nv-wc-crumb a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: inherit;
	text-decoration: none;
	transition: color .2s;
}
.nv-wc-crumb a:hover { color: var(--nv-single-accent); }

/* Bloc galerie + résumé --------------------------------------------------- */
.nv-wc-single div.product { position: relative; margin: 0; }
.nv-wc-top {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	border: 1px solid var(--nv-line);
	background: #fff;
}
@media (min-width: 1024px) {
	.nv-wc-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.nv-wc-top > .images { border-right: 1px solid var(--nv-line); }
}

/* Galerie WooCommerce standard (loupe 🔍, zoom, carrousel) : le CSS de
   WooCommerce est retiré sur cette vue, sa mise en page est donc ici. */
.nv-wc-top > .images {
	position: relative;
	float: none;
	width: auto;
	margin: 0;
	overflow: hidden;
	background: #f3f0ea;
}
.nv-wc-top .woocommerce-product-gallery__wrapper { margin: 0; padding: 0; }
.nv-wc-top .woocommerce-product-gallery__image,
.nv-wc-top .woocommerce-product-gallery__image--placeholder { position: relative; overflow: hidden; margin: 0; }
.nv-wc-top .woocommerce-product-gallery__image a { display: block; }
.nv-wc-top > .images img:not(.zoomImg) {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
/* Zoom au survol (jquery.zoom) : image agrandie superposée. */
.nv-wc-top .woocommerce-product-gallery__image img.zoomImg { width: auto; height: auto; aspect-ratio: auto; max-width: none; max-height: none; background: #fff; }

/* Image unique : occupe toute la hauteur du bloc, même si le résumé est plus
   haut que l'image carrée (sinon le fond de colonne apparaît dessous). */
@media (min-width: 1024px) {
	.nv-wc-top .woocommerce-product-gallery__wrapper:has(> :only-child),
	.nv-wc-top .woocommerce-product-gallery__wrapper > :only-child,
	.nv-wc-top .woocommerce-product-gallery__wrapper > :only-child > a,
	.nv-wc-top .woocommerce-product-gallery__wrapper > :only-child img:not(.zoomImg) { height: 100%; }
}

/* Loupe 🔍 : bouton rond superposé en haut à droite de l'image. */
.nv-wc-top .woocommerce-product-gallery__trigger {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 9;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
	font-size: 16px;
	line-height: 1;
	text-decoration: none;
	transition: transform .2s;
}
.nv-wc-top .woocommerce-product-gallery__trigger:hover { transform: scale(1.08); }

/* Carrousel (2 images et plus) : vignettes sous l'image principale. */
.nv-wc-top .flex-viewport { background: #f3f0ea; }
.nv-wc-top .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	margin: 1px 0 0;
	padding: 0;
	list-style: none;
	background: var(--nv-line);
}
.nv-wc-top .flex-control-thumbs li { margin: 0; background: #f3f0ea; }
.nv-wc-top .flex-control-thumbs img { cursor: pointer; opacity: .55; transition: opacity .2s; }
.nv-wc-top .flex-control-thumbs img:hover,
.nv-wc-top .flex-control-thumbs img.flex-active { opacity: 1; }

.nv-wc-single .summary {
	float: none;
	width: auto;
	margin: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(28px, 5vw, 72px);
}

.nv-wc-eyebrow {
	margin: 0 0 22px;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--nv-single-accent);
}

.nv-wc-single .product_title {
	margin: 0;
	font-weight: 400;
	font-size: clamp(2.4rem, 4.6vw, 5rem);
	line-height: 1;
	letter-spacing: -.05em;
	overflow-wrap: anywhere;
}

.nv-wc-single .woocommerce-product-details__short-description {
	margin-top: 28px;
	max-width: 36rem;
	font-size: 1.125rem;
	font-weight: 300;
	line-height: 1.7;
	color: rgba(17, 17, 17, .62);
}
.nv-wc-single .woocommerce-product-details__short-description p { margin: 0; }

.nv-wc-actions { margin: 36px 0 0; }
.nv-wc-cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 52px;
	padding: 0 24px;
	background: var(--nv-single-accent);
	color: #fff !important;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .2s, transform .2s;
}
.nv-wc-cta:hover { background: #111; }
.nv-wc-cta svg { transition: transform .2s; }
.nv-wc-cta:hover svg { transform: translateX(3px); }

.nv-wc-single .product_meta {
	display: grid;
	gap: 10px;
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid var(--nv-line);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(17, 17, 17, .5);
}
.nv-wc-single .product_meta .sku,
.nv-wc-single .product_meta a { color: #111; text-decoration: none; }
.nv-wc-single .product_meta a:hover { color: var(--nv-single-accent); }

/* Description (contenu produit du package) ------------------------------- */
.nv-wc-description { padding-bottom: 24px; }

/* Repli si le package ne fournit pas de style de description : spécificité
   nulle (:where) — le woocommerce.css de la démo l'emporte toujours. */
:where(.nv-wc-description .nv-product-content) { max-width: 1100px; margin: 0 auto; padding: 64px 24px; font-size: 18px; line-height: 1.75; }
:where(.nv-wc-description .nv-product-intro) { max-width: 820px; font-size: 1.2em; color: rgba(17, 17, 17, .68); }
:where(.nv-wc-description .nv-product-spec) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 48px 0; background: var(--nv-line); }
:where(.nv-wc-description .nv-product-spec p) { margin: 0; background: #f3f0ea; padding: 28px; }
:where(.nv-wc-description .nv-product-content section) { padding: 40px 0; border-top: 1px solid var(--nv-line); }
:where(.nv-wc-description .nv-product-content h2) { margin: 0 0 20px; font-weight: 400; font-size: clamp(2rem, 4vw, 3.6rem); letter-spacing: -.045em; }
:where(.nv-wc-description .nv-product-content ul) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; padding-left: 20px; list-style: disc; }
:where(.nv-wc-description .nv-product-content blockquote) { margin: 32px 0 0; border-left: 3px solid var(--nv-single-accent); background: #111; color: #fff; padding: 28px; }

@media (max-width: 640px) {
	:where(.nv-wc-description .nv-product-spec),
	:where(.nv-wc-description .nv-product-content ul) { grid-template-columns: 1fr; }
	.nv-wc-top > .images { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Gabarit habillé (article dont le contenu n'est que le corps, démos sans
   page article complète) : polices et couleurs héritées du site.css / scope. */
.nv-single{padding:56px 0 72px}
.nv-single-container{max-width:1080px;margin:0 auto;padding:0 24px}
.nv-single-crumb{font-size:13px;letter-spacing:.06em;text-transform:uppercase;opacity:.65;display:flex;gap:10px;margin-bottom:28px}
.nv-single-crumb a{color:inherit;text-decoration:none}
.nv-single-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px;align-items:start}
@media (max-width:820px){.nv-single-grid{grid-template-columns:1fr}}
.nv-single-media img{width:100%;height:auto;border-radius:14px;display:block}
.nv-single-media-wide{margin:0 0 32px}
.nv-single-badge{display:inline-block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.7;border:1px solid currentColor;border-radius:999px;padding:4px 12px;margin:0 0 14px}
.nv-single-title{margin:0 0 14px;line-height:1.15}
.nv-single-meta{opacity:.6;font-size:14px;margin:0 0 6px}
.nv-single-price{font-size:1.5em;font-weight:600;margin:6px 0 10px}
.nv-single-excerpt{opacity:.85;margin:0 0 18px}
.nv-single-cta{margin:10px 0 14px}
.nv-single-btn{display:inline-block;padding:13px 26px;border-radius:6px;background:var(--nv-single-accent);color:#fff !important;text-decoration:none;font-size:14px;letter-spacing:.08em;text-transform:uppercase}
.nv-single-btn:hover{opacity:.88}
.nv-single-sku{font-size:13px;opacity:.55}
.nv-single-content{margin-top:40px;max-width:820px}
.nv-single-content h1,.nv-single-content h2,.nv-single-content h3{margin:1.6em 0 .5em}
.nv-single-content p,.nv-single-content li{line-height:1.75}
.nv-single .post-navigation{margin-top:48px;font-size:14px}

/* Replis génériques (démos sans framework CSS) — spécificité nulle (:where) :
   si la démo définit .container, .price, etc., ses règles l'emportent. */
:where(.nv-wc-single) :where(.container) { box-sizing: border-box; width: 100%; max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; }
:where(.nv-wc-single .summary) :where(.price) { margin: 16px 0 0; font-size: 1.25rem; }
:where(.nv-wc-description) { padding-bottom: 24px; }

/* Texte réservé aux lecteurs d'écran (titre « Navigation de l'article »…) :
   la règle du cœur WordPress est retirée par le nettoyage des styles. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}