/*
 * Rimal — Mode "Noir Royal"
 * Activé via body.noir-mode (toggle JS + localStorage).
 * Palette spec : rimal-naturals-design.html (handoff Drive)
 *   bg #0C0A08 · raised #17130F · deep #050403
 *   ink #F3ECDC · soft #B9AD93 · faint #847A68
 *   gold #C7A050 · gold-bright #E7C579 · on-gold #17130D
 * Typo : Bodoni Moda (display) + Montserrat (UI)
 */

/* =========================================================
   GOOGLE FONTS — préchargés en base; activés seulement en
   mode noir pour ne pas ralentir le mode jour.
   Le lien <link> est injecté par dark-mode.js au premier
   clic si absent.
   ========================================================= */

/* =========================================================
   0.  TOKENS GLOBAUX  (surchargent les valeurs WordPress)
   ========================================================= */
body.noir-mode {
	/* — Couleurs de fond — */
	--nr-bg:        #0C0A08;
	--nr-raised:    #17130F;
	--nr-deep:      #050403;

	/* — Encre — */
	--nr-ink:       #F3ECDC;
	--nr-ink-soft:  #B9AD93;
	--nr-ink-faint: #847A68;

	/* — Or — */
	--nr-gold:       #C7A050;
	--nr-gold-bright:#E7C579;
	--nr-on-gold:    #17130D;

	/* — Lignes — */
	--nr-line:      rgba(199,160,80,0.22);
	--nr-line-soft: rgba(243,236,220,0.07);

	/* — Overlay nav — */
	--nr-nav-bg:    rgba(12,10,8,0.90);

	/* — Surcharge tokens WordPress — */
	--wp--preset--color--base:             #0C0A08;
	--wp--preset--color--base-soft:        #17130F;
	--wp--preset--color--surface:          #17130F;
	--wp--preset--color--contrast:         #F3ECDC;
	--wp--preset--color--contrast-muted:   #B9AD93;
	--wp--preset--color--border:           rgba(199,160,80,0.22);
	--wp--preset--color--border-strong:    rgba(199,160,80,0.44);
	--wp--preset--color--terracotta:       #C7A050;
	--wp--preset--color--terracotta-ink:   #C7A050;
	--wp--preset--color--terracotta-on-dark: #E7C579;
	--wp--preset--color--rose:             #C7A050;
	--wp--preset--color--rose-ink:         #E7C579;
	--wp--custom--color--focus:            #E7C579;

	/* — Typographie — */
	--wp--preset--font-family--serif: 'Bodoni Moda', Georgia, serif;
	--wp--preset--font-family--sans:  'Montserrat', -apple-system, sans-serif;

	/* — Transitions de l'OS — */
	color-scheme: dark;
}

/* =========================================================
   1.  BASE
   ========================================================= */
body.noir-mode {
	background: var(--nr-bg);
	color: var(--nr-ink);
}

body.noir-mode ::selection {
	background: var(--nr-gold);
	color: var(--nr-on-gold);
}

body.noir-mode a {
	color: inherit;
}

/* =========================================================
   2.  HEADER
   ========================================================= */
body.noir-mode .site-header {
	background: var(--nr-nav-bg);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-bottom-color: var(--nr-line-soft);
}

body.noir-mode .site-header.is-scrolled {
	box-shadow: 0 4px 32px rgba(0,0,0,0.55);
}

body.noir-mode .site-wordmark__name {
	color: var(--nr-ink);
}

body.noir-mode .site-wordmark__sub {
	color: var(--nr-gold);
}

body.noir-mode .site-wordmark a:hover .site-wordmark__name {
	background: linear-gradient(
		100deg,
		var(--nr-ink) 20%,
		var(--nr-gold-bright) 50%,
		var(--nr-ink) 80%
	);
	background-size: 200% auto;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

body.noir-mode .header-action {
	color: var(--nr-ink-soft);
}

body.noir-mode .header-action:hover {
	color: var(--nr-gold-bright);
}

body.noir-mode .rimal-cart-count__badge {
	background: var(--nr-gold);
	color: var(--nr-on-gold);
}

body.noir-mode .rimal-cart-count[data-count="0"] .rimal-cart-count__badge {
	background: transparent;
	color: var(--nr-ink-soft);
	border-color: var(--nr-line);
}

/* ---- Liens nav desktop ---- */
body.noir-mode .wp-block-navigation,
body.noir-mode .wp-block-navigation .wp-block-navigation-item,
body.noir-mode .wp-block-navigation .wp-block-navigation-item__content,
body.noir-mode .wp-block-navigation .wp-block-navigation-item__label,
body.noir-mode .wp-block-navigation :where(a),
body.noir-mode .wp-block-navigation :where(a:active),
body.noir-mode .wp-block-navigation :where(a:focus),
body.noir-mode .wp-block-navigation button.wp-block-navigation-item__content,
body.noir-mode .wp-block-navigation__responsive-container-open,
body.noir-mode .wp-block-navigation__responsive-container-close {
	color: var(--nr-ink) !important;
}

body.noir-mode .wp-block-navigation svg,
body.noir-mode .wp-block-navigation__responsive-container-open svg,
body.noir-mode .wp-block-navigation__responsive-container-close svg,
body.noir-mode .wp-block-navigation .wp-block-navigation__submenu-icon svg {
	stroke: var(--nr-ink) !important;
	fill: var(--nr-ink) !important;
}

/* ---- Sous-menus dropdown ---- */
/* WordPress injecte background:#fff et color:#000 en dur — on écrase avec !important */
body.noir-mode .wp-block-navigation .wp-block-navigation__submenu-container,
body.noir-mode .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container,
body.noir-mode .wp-block-navigation:not(.has-text-color) .wp-block-navigation__submenu-container {
	background-color: var(--nr-raised) !important;
	color: var(--nr-ink) !important;
	border-color: var(--nr-line) !important;
}

body.noir-mode .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: rgba(199,160,80,0.08) !important;
}

/* ---- Menu mobile overlay ---- */
/* WordPress injecte background:#fff et color:#000 en dur */
body.noir-mode .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open,
body.noir-mode .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay),
body.noir-mode .wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	background-color: var(--nr-bg) !important;
	color: var(--nr-ink) !important;
}

/* Tous les éléments enfants en mode overlay */
body.noir-mode .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
body.noir-mode .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
body.noir-mode .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
body.noir-mode .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__label,
body.noir-mode .wp-block-navigation__responsive-container.is-menu-open a {
	color: var(--nr-ink) !important;
	background: transparent !important;
}

body.noir-mode .site-nav .is-menu-open .wp-block-navigation-item {
	border-bottom-color: var(--nr-line-soft);
}

/* ---- Underline animation (depuis animations.css) ---- */
body.noir-mode .site-nav .wp-block-navigation-item__content::after {
	background: var(--nr-gold);
}

/* Search panel */
body.noir-mode .header-search__panel {
	background: var(--nr-raised);
	border-bottom-color: var(--nr-line-soft);
	box-shadow: 0 16px 40px rgba(0,0,0,0.5);
}

/* =========================================================
   3.  BOUTONS
   ========================================================= */
body.noir-mode .wp-element-button,
body.noir-mode .wp-block-button__link,
body.noir-mode .button,
body.noir-mode button.button,
body.noir-mode a.button,
body.noir-mode input[type="submit"] {
	background: var(--nr-gold);
	color: var(--nr-on-gold);
	border-color: var(--nr-gold);
	font-family: var(--wp--preset--font-family--sans);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-size: 0.78rem;
	font-weight: 600;
}

body.noir-mode .wp-element-button:hover,
body.noir-mode .wp-block-button__link:hover,
body.noir-mode .button:hover,
body.noir-mode input[type="submit"]:hover {
	background: var(--nr-gold-bright);
	color: var(--nr-on-gold);
	border-color: var(--nr-gold-bright);
	box-shadow: 0 8px 32px rgba(199,160,80,0.3);
}

body.noir-mode .is-style-outline > .wp-block-button__link,
body.noir-mode .button.is-secondary {
	background: transparent;
	color: var(--nr-ink);
	border-color: var(--nr-line);
}

body.noir-mode .is-style-outline > .wp-block-button__link:hover,
body.noir-mode .button.is-secondary:hover {
	border-color: var(--nr-gold);
	color: var(--nr-gold-bright);
	background: transparent;
}

/* =========================================================
   4.  INPUTS / FORMULAIRES
   ========================================================= */
body.noir-mode input[type="text"],
body.noir-mode input[type="email"],
body.noir-mode input[type="tel"],
body.noir-mode input[type="password"],
body.noir-mode input[type="search"],
body.noir-mode input[type="number"],
body.noir-mode input[type="url"],
body.noir-mode select,
body.noir-mode textarea {
	background: var(--nr-raised);
	border-color: var(--nr-line);
	color: var(--nr-ink);
}

body.noir-mode input:focus,
body.noir-mode select:focus,
body.noir-mode textarea:focus {
	border-color: var(--nr-gold);
	box-shadow: 0 0 0 3px rgba(199,160,80,0.2);
}

body.noir-mode ::placeholder {
	color: var(--nr-ink-faint);
}

body.noir-mode select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23C7A050' stroke-width='1.6'/%3E%3C/svg%3E");
}

/* =========================================================
   5.  TYPOGRAPHIE
   ========================================================= */
body.noir-mode h1,
body.noir-mode h2,
body.noir-mode h3,
body.noir-mode h4,
body.noir-mode h5,
body.noir-mode h6 {
	font-family: 'Bodoni Moda', Georgia, serif;
	color: var(--nr-ink);
}

body.noir-mode .is-style-eyebrow,
body.noir-mode .eyebrow {
	color: var(--nr-gold);
	letter-spacing: 0.2em;
	font-family: 'Montserrat', sans-serif;
}

body.noir-mode .text-link a {
	text-decoration-color: var(--nr-gold);
}

body.noir-mode p {
	color: var(--nr-ink-soft);
}

body.noir-mode .lead,
body.noir-mode .home-hero__lead {
	color: var(--nr-ink-soft);
}

/* =========================================================
   6.  HERO
   ========================================================= */
body.noir-mode .home-hero {
	background: var(--nr-bg);
}

body.noir-mode .home-hero__heading em,
body.noir-mode .home-hero h1 em {
	font-style: italic;
	color: var(--nr-gold-bright);
}

/* =========================================================
   7.  GRILLE PRODUITS
   ========================================================= */
body.noir-mode .woocommerce ul.products li.product,
body.noir-mode .wp-block-woocommerce-product-template li.product {
	background: var(--nr-bg);
	border: 1px solid var(--nr-line-soft);
}

body.noir-mode .woocommerce ul.products li.product:hover,
body.noir-mode .wp-block-woocommerce-product-template li.product:hover {
	box-shadow:
		0 20px 60px rgba(199,160,80,0.12),
		0 8px 24px rgba(0,0,0,0.4);
	border-color: var(--nr-line);
}

body.noir-mode .woocommerce ul.products li.product .woocommerce-loop-product__title {
	color: var(--nr-ink);
	font-family: 'Bodoni Moda', Georgia, serif;
}

body.noir-mode .woocommerce ul.products li.product:hover .woocommerce-loop-product__title {
	color: var(--nr-gold-bright);
}

body.noir-mode .woocommerce ul.products li.product .price {
	color: var(--nr-gold);
}

body.noir-mode .woocommerce ul.products li.product .price del {
	color: var(--nr-ink-faint);
}

body.noir-mode .woocommerce .onsale,
body.noir-mode span.onsale {
	background: var(--nr-gold);
	color: var(--nr-on-gold);
}

/* =========================================================
   8.  PAGE PRODUIT UNIQUE
   ========================================================= */
body.noir-mode .woocommerce-product-gallery {
	background: var(--nr-raised);
	border: 1px solid var(--nr-line);
}

body.noir-mode .product_title {
	font-family: 'Bodoni Moda', Georgia, serif;
	color: var(--nr-ink);
}

body.noir-mode .woocommerce-product-details__short-description {
	color: var(--nr-ink-soft);
}

body.noir-mode .price {
	color: var(--nr-gold);
}

body.noir-mode .woocommerce-tabs .tabs {
	border-bottom-color: var(--nr-line);
}

body.noir-mode .woocommerce-tabs .tabs li a {
	color: var(--nr-ink-soft);
}

body.noir-mode .woocommerce-tabs .tabs li.active a {
	color: var(--nr-ink);
	border-color: var(--nr-gold);
}

body.noir-mode .woocommerce-Tabs-panel {
	color: var(--nr-ink-soft);
}

/* Quantité */
body.noir-mode .rimal-qty-btn {
	background: var(--nr-raised);
	border-color: var(--nr-line);
	color: var(--nr-ink);
}

body.noir-mode .rimal-qty-btn:hover {
	border-color: var(--nr-gold);
	color: var(--nr-gold-bright);
}

/* =========================================================
   9.  PANIER / CHECKOUT
   ========================================================= */
body.noir-mode .woocommerce table.shop_table {
	border-color: var(--nr-line);
}

body.noir-mode .woocommerce table.shop_table th {
	background: var(--nr-raised);
	color: var(--nr-ink);
	border-bottom-color: var(--nr-line);
}

body.noir-mode .woocommerce table.shop_table td {
	border-bottom-color: var(--nr-line-soft);
	color: var(--nr-ink-soft);
}

body.noir-mode .woocommerce-cart .cart-collaterals .cart_totals {
	background: var(--nr-raised);
	border: 1px solid var(--nr-line);
	padding: 2rem;
}

body.noir-mode .woocommerce #payment {
	background: var(--nr-raised);
	border: 1px solid var(--nr-line);
}

/* =========================================================
   10.  NOTICES WooCommerce
   ========================================================= */
body.noir-mode .woocommerce-message {
	background: rgba(199,160,80,0.12);
	border-color: var(--nr-gold);
	color: var(--nr-ink);
}

body.noir-mode .woocommerce-info {
	background: rgba(199,160,80,0.08);
	border-color: var(--nr-gold);
	color: var(--nr-ink-soft);
}

body.noir-mode .woocommerce-error {
	background: rgba(163,53,42,0.15);
	border-color: #A3352A;
	color: #f5aca6;
}

/* =========================================================
   11.  STICKY BUY BAR
   ========================================================= */
body.noir-mode .rimal-sticky-buy {
	background: var(--nr-raised);
	border-top: 1px solid var(--nr-line);
	backdrop-filter: blur(12px);
}

body.noir-mode .rimal-sticky-buy__name {
	color: var(--nr-ink);
	font-family: 'Bodoni Moda', Georgia, serif;
}

body.noir-mode .rimal-sticky-buy__price {
	color: var(--nr-gold);
}

/* =========================================================
   12.  FOOTER
   ========================================================= */
body.noir-mode .site-footer {
	background: var(--nr-deep);
	border-top: 1px solid var(--nr-line-soft);
}

body.noir-mode .site-footer,
body.noir-mode .site-footer p,
body.noir-mode .site-footer li {
	color: var(--nr-ink-soft);
}

body.noir-mode .site-footer a {
	color: var(--nr-ink-soft);
}

body.noir-mode .site-footer a:hover {
	color: var(--nr-gold-bright);
}

body.noir-mode .site-footer .site-wordmark a {
	color: var(--nr-ink);
}

body.noir-mode .site-footer .site-wordmark__sub {
	color: var(--nr-gold);
}

/* =========================================================
   13.  SECTIONS / BLOCS
   ========================================================= */
body.noir-mode .has-surface-background-color,
body.noir-mode .wp-block-group.has-surface-background-color {
	background: var(--nr-raised) !important;
}

body.noir-mode .has-contrast-background-color,
body.noir-mode .wp-block-group.has-contrast-background-color {
	background: var(--nr-deep) !important;
}

body.noir-mode .section-head h2 {
	font-family: 'Bodoni Moda', Georgia, serif;
}

body.noir-mode .section-head p {
	color: var(--nr-ink-faint);
}

body.noir-mode .wp-block-separator,
body.noir-mode hr {
	border-color: var(--nr-line);
}

/* =========================================================
   14.  TOGGLE BUTTON
   ========================================================= */
.rimal-mode-toggle {
	position: fixed;
	bottom: 28px;
	right: 24px;
	z-index: 10000;
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 10px 18px 10px 14px;
	border: 1px solid rgba(62,57,57,0.22);
	border-radius: 999px;
	background: rgba(242,233,220,0.92);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	color: #3E3939;
	font-family: 'Montserrat', -apple-system, sans-serif;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	transition:
		background   0.4s cubic-bezier(0.16,1,0.3,1),
		border-color 0.4s ease,
		color        0.4s ease,
		box-shadow   0.4s ease,
		transform    0.3s cubic-bezier(0.34,1.56,0.64,1);
	box-shadow: 0 4px 20px rgba(62,57,57,0.12);
	user-select: none;
	-webkit-user-select: none;
}

.rimal-mode-toggle:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 28px rgba(62,57,57,0.18);
}

.rimal-mode-toggle:active {
	transform: scale(0.96);
}

/* Icone soleil/lune */
.rimal-mode-toggle__icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s ease;
}

/* Texte */
.rimal-mode-toggle__label {
	white-space: nowrap;
}

/* ---- état NOIR MODE actif ---- */
body.noir-mode .rimal-mode-toggle {
	background: rgba(23,19,15,0.92);
	border-color: rgba(199,160,80,0.35);
	color: #E7C579;
	box-shadow:
		0 4px 20px rgba(0,0,0,0.4),
		0 0 0 1px rgba(199,160,80,0.1) inset;
}

body.noir-mode .rimal-mode-toggle:hover {
	border-color: rgba(199,160,80,0.65);
	box-shadow:
		0 8px 32px rgba(0,0,0,0.5),
		0 0 24px rgba(199,160,80,0.08);
}

body.noir-mode .rimal-mode-toggle__icon {
	transform: rotate(360deg);
}

/* =========================================================
   15.  TRANSITION GLOBALE (passage jour ↔ nuit)
   ========================================================= */
body.rimal-transitioning,
body.rimal-transitioning * {
	transition:
		background-color  0.45s cubic-bezier(0.16,1,0.3,1),
		color             0.45s cubic-bezier(0.16,1,0.3,1),
		border-color      0.45s cubic-bezier(0.16,1,0.3,1),
		box-shadow        0.45s ease !important;
}

/* =========================================================
   16.  MICRO-AJUSTEMENTS mode noir
   ========================================================= */

/* Étoiles décoratives autour du toggle en mode noir */
@keyframes nr-pulse-gold {
	0%, 100% { opacity: 0.6; transform: scale(1); }
	50%       { opacity: 1;   transform: scale(1.15); }
}

body.noir-mode .rimal-mode-toggle::before {
	content: '✦';
	font-size: 0.55rem;
	color: var(--nr-gold);
	animation: nr-pulse-gold 2.4s ease-in-out infinite;
	margin-right: -4px;
}

/* Focus style adapté au mode noir */
body.noir-mode :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline-color: var(--nr-gold);
	box-shadow: 0 0 0 3px rgba(199,160,80,0.2);
}

/* Fil d'Ariane */
body.noir-mode .woocommerce-breadcrumb {
	color: var(--nr-ink-faint);
}

body.noir-mode .woocommerce-breadcrumb a {
	color: var(--nr-gold);
}

/* Stars avis */
body.noir-mode .star-rating span::before,
body.noir-mode .woocommerce-product-rating .star-rating::before {
	color: var(--nr-gold);
}

/* Images — légère luminosité réduite */
body.noir-mode img:not(.site-wordmark img) {
	filter: brightness(0.92) contrast(1.04);
	transition: filter 0.4s ease;
}

body.noir-mode .woocommerce ul.products li.product:hover img {
	filter: brightness(1) contrast(1);
}