/*
Theme Name:   NoirEtAmber
Theme URI:    https://noiretamber.com
Description:  Thème personnalisé NoirEtAmber
Author:       NoirEtAmber
Author URI:   https://noiretamber.com
Template:     xstore
Version:      1.1
Text Domain:  noiretamber
Tags:         e-commerce, woocommerce, custom-menu, custom-logo, full-width-template
*/

/* ==========================================================================
   NoirEtAmber — Phase 1 + 2 : Système visuel global
   noir #050505 | ivoire #ECE6DB | amber #C55A17 | gris charbon #1A1A1A
   ========================================================================== */
:root {
	--ne-noir: #050505;
	--ne-noir-charbon: #161616;
	--ne-gris-charbon: #1A1A1A;
	--ne-ivoire: #ECE6DB;
	--ne-ivoire-doux: #D4CFC5;
	--ne-amber: #C55A17;
	--ne-amber-hover: #B04D14;
	--ne-amber-discret: rgba(197, 90, 23, 0.15);
}

/* Override Elementor / XStore global colors pour cohérence */
body,
.elementor-body {
	--et_active-color: var(--ne-amber) !important;
	--et_dark-color: var(--ne-noir) !important;
	--et_main-color: var(--ne-ivoire-doux) !important;
	--e-global-color-primary: var(--ne-amber) !important;
	--e-global-color-text: var(--ne-ivoire) !important;
	--e-global-color-accent: var(--ne-amber) !important;
}

/* Typographie globale — Titres serif, corps sans-serif */
body,
.elementor-body {
	font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif !important;
	color: var(--ne-ivoire) !important;
	background-color: var(--ne-noir) !important;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.entry-title {
	font-family: "Playfair Display", Georgia, serif !important;
	font-weight: 400;
	color: var(--ne-ivoire) !important;
}

/* Boutons — fond noir / contour ivoire / hover amber */
.elementor-button,
.woocommerce .button,
input[type="submit"],
button[type="submit"] {
	background-color: var(--ne-noir) !important;
	color: var(--ne-ivoire) !important;
	border: 1px solid var(--ne-ivoire-doux) !important;
	border-radius: 2px !important;
	padding: 14px 32px !important;
	font-family: "DM Sans", sans-serif !important;
	transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease !important;
}
.elementor-button:hover,
.woocommerce .button:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
	color: var(--ne-amber) !important;
	border-color: var(--ne-amber) !important;
	background-color: var(--ne-noir) !important;
}

/* Liens — hover amber discret */
a {
	color: var(--ne-ivoire);
	transition: color 0.2s ease;
}
a:hover {
	color: var(--ne-amber) !important;
}

/* Espacements premium */
.section-padding,
.elementor-section {
	--ne-section-padding: 80px;
}
.elementor-section.elementor-section-boxed > .elementor-container {
	max-width: 1400px;
	margin: 0 auto;
}

/* ==========================================================================
   NoirEtAmber cleanup — Masque barre promo démo
   ========================================================================== */
.elementor-element-14cbc570 {
	display: none !important;
}

/* ==========================================================================
   NoirEtAmber — Header Luxe (Apple / Zara / Galerie)
   Fond transparent + blur | Bordures fines | Transitions smooth
   ========================================================================== */

/* 1. HEADER GLOBAL — noir transparent + backdrop blur */
.etheme-elementor-header-wrapper,
.elementor-location-header,
.elementor-1260 {
	background-color: rgba(0, 0, 0, 0.85) !important;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
	transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
	            padding 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Structure — ligne supérieure + centrage */
.elementor-1260 .elementor-element-6fdfb640 {
	padding-top: 16px !important;
	padding-bottom: 16px !important;
	transition: padding 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* Barre menu — centrage horizontal */
.elementor-1260 .elementor-element-2125091 .elementor-widget-wrap,
.elementor-1260 .elementor-element-2125091 .elementor-element-43071610 {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
}

/* Barre menu — padding 20px+ */
.elementor-1260 .elementor-element-2125091,
.elementor-1260 .elementor-element.elementor-element-2125091 {
	background: transparent !important;
	border: none !important;
	padding-top: 22px !important;
	padding-bottom: 22px !important;
	margin-bottom: 0 !important;
	transition: padding 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 6. ESPACEMENT — gap 40–60px, padding vertical */
.elementor-1260 .elementor-element-43071610 .etheme-elementor-nav-menu-item-parent .elementor-item {
	padding: 22px 0 !important;
}
.elementor-1260 .elementor-element-43071610 {
	--menu-item-spacing: 50px !important;
}

/* 2. MENU TYPO — 18px, 400/500, letter-spacing 1px, small-caps */
.elementor-1260 .elementor-element-43071610 .etheme-elementor-nav-menu-item-parent .elementor-item,
.elementor-1260 .elementor-element-43071610 .elementor-item {
	font-family: "Cormorant Garamond", "Bodoni Moda", Georgia, serif !important;
	font-size: 18px !important;
	font-weight: 500 !important;
	letter-spacing: 1px !important;
	text-transform: uppercase !important;
}

/* 7. LOGO — centré + glow ambre très subtil au hover */
.elementor-element-6a745eb5 img,
.elementor-1260 .elementor-element-6a745eb5 img {
	width: 215px !important;
	max-width: 215px !important;
	height: auto !important;
	transition: filter 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.elementor-1260 .elementor-element-6a745eb5 a:hover img {
	filter: drop-shadow(0 0 12px rgba(200, 169, 106, 0.25)) !important;
}

/* 9. STICKY HEADER — plus opaque, padding réduit */
.sticky-on .etheme-elementor-header-wrapper,
.sticky-on .elementor-1260 {
	background-color: rgba(0, 0, 0, 0.96) !important;
	backdrop-filter: blur(10px) !important;
	-webkit-backdrop-filter: blur(10px) !important;
}
.sticky-on .elementor-1260 .elementor-element-2125091,
.sticky-on .elementor-1260 .elementor-element.elementor-element-2125091 {
	padding-top: 14px !important;
	padding-bottom: 14px !important;
}
.sticky-on .elementor-1260 .elementor-element-6fdfb640 {
	padding-top: 10px !important;
	padding-bottom: 10px !important;
}
@media (max-width: 1024px) {
	.elementor-element-6a745eb5 img,
	.elementor-1260 .elementor-element-6a745eb5 img {
		width: 189px !important;
		max-width: 189px !important;
	}
}
@media (max-width: 767px) {
	.elementor-element-6a745eb5 img,
	.elementor-1260 .elementor-element-6a745eb5 img {
		width: 169px !important;
		max-width: 169px !important;
	}
}

/* ==========================================================================
   10. VERSION MOBILE — plein écran noir | Liens 20px+ | fade + slide
   ========================================================================== */
@media (max-width: 1024px) {
	/* Panneau mobile — fond noir profond */
	.elementor-1260 .etheme-elementor-off-canvas__main,
	.elementor-1260 .etheme-elementor-sidebar,
	.mobile-menu-content,
	.et-mobile-panel,
	.elementor-widget-theme-etheme_mobile_menu .etheme-elementor-nav-menu {
		background-color: rgba(0, 0, 0, 0.98) !important;
	}
	/* Liens menu mobile — 20px+, espacement large */
	.elementor-1260 .etheme-elementor-nav-menu.vertical .elementor-item,
	.elementor-widget-theme-etheme_mobile_menu .elementor-item,
	.mobile-menu-content .etheme-elementor-nav-menu-item .elementor-item,
	.mobile-menu-content .et_b_header-menu .menu li a {
		font-size: 20px !important;
		padding-top: 22px !important;
		padding-bottom: 22px !important;
		color: #d6d1c4 !important;
		font-family: "Cormorant Garamond", "Bodoni Moda", Georgia, serif !important;
		letter-spacing: 1px !important;
		text-transform: uppercase !important;
		transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
		            opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
		            transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
	}
	.elementor-1260 .etheme-elementor-nav-menu.vertical .elementor-item:hover,
	.elementor-widget-theme-etheme_mobile_menu .elementor-item:hover,
	.mobile-menu-content .et_b_header-menu .menu li a:hover {
		color: #c8a96a !important;
	}
	.elementor-1260 .etheme-elementor-nav-menu.vertical .elementor-item.elementor-item-active,
	.elementor-widget-theme-etheme_mobile_menu .elementor-item.elementor-item-active {
		color: #ffffff !important;
	}
	/* Animation fade + slide (panneau mobile) */
	.elementor-1260 .etheme-elementor-off-canvas__main,
	.mobile-menu-content {
		animation: ne-mobile-fade-slide 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
	}
}
@keyframes ne-mobile-fade-slide {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ==========================================================================
   Menu — Couleurs + Hover signature (ligne centre→côtés) + Micro-interactions
   3. Normal #d6d1c4 | Hover #c8a96a | Actif #ffffff
   4. OPTION A : ligne fine centre→côtés, ambre
   5. Micro : translateY(-2px), cubic-bezier(0.4, 0, 0.2, 1)
   ========================================================================== */
/* 3. Couleurs de base */
.elementor-1260 .etheme-elementor-nav-menu-item-parent .elementor-item,
.elementor-1260 .elementor-item {
	color: #d6d1c4 !important;
	fill: #d6d1c4 !important;
	cursor: pointer !important;
	transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
	            transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
	            fill 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* 5. Hover — ambre + translateY(-2px) */
.elementor-1260 .etheme-elementor-nav-menu-item-parent .elementor-item:hover,
.elementor-1260 .elementor-item:hover,
.elementor-1260 li:hover > .etheme-elementor-nav-menu-item-parent .elementor-item {
	color: #c8a96a !important;
	fill: #c8a96a !important;
	transform: translateY(-2px) !important;
}
.elementor-1260 .elementor-item.elementor-item-active {
	color: #ffffff !important;
	fill: #ffffff !important;
}

/* 4. Hover signature — ligne fine centre→côtés (OPTION A) */
.elementor-1260 .elementor-element-43071610 .elementor-item::before {
	display: none !important;
}
.elementor-1260 .elementor-element-43071610 .elementor-item::after {
	content: '' !important;
	display: block !important;
	position: absolute !important;
	bottom: 14px !important;
	left: 50% !important;
	width: 100% !important;
	height: 1px !important;
	background-color: #c8a96a !important;
	transform: translateX(-50%) scaleX(0) !important;
	transform-origin: center !important;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
	            opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
	opacity: 0 !important;
}
.elementor-1260 .elementor-element-43071610 .etheme-elementor-nav-menu-item-parent .elementor-item,
.elementor-1260 .elementor-element-43071610 .elementor-item {
	position: relative !important;
}
.elementor-1260 .elementor-element-43071610 .elementor-item:hover::after,
.elementor-1260 .elementor-element-43071610 .etheme-elementor-nav-menu-item-parent .elementor-item:hover::after,
.elementor-1260 .elementor-element-43071610 li:hover .elementor-item::after {
	transform: translateX(-50%) scaleX(1) !important;
	opacity: 1 !important;
}
.elementor-1260 .elementor-element-43071610 .elementor-item.elementor-item-active::after {
	background-color: #ffffff !important;
	transform: translateX(-50%) scaleX(1) !important;
	opacity: 1 !important;
}

/* Menu dropdown — couleurs alignées */
.elementor-1260 .item-design-dropdown .nav-sublist-dropdown {
	background-color: var(--ne-gris-charbon) !important;
}
.elementor-1260 .item-design-dropdown .nav-sublist-dropdown ul > li > .etheme-elementor-nav-menu-item {
	color: #d6d1c4 !important;
}
.elementor-1260 .item-design-dropdown .nav-sublist-dropdown ul > li > .etheme-elementor-nav-menu-item:hover {
	color: #c8a96a !important;
}

/* 8. ICÔNES — ivoire défaut, ambre hover, scale 1→1.1 */
.elementor-1260 .etheme-elementor-off-canvas__toggle .elementor-button,
.elementor-1260 .etheme-elementor-off-canvas__toggle_wrapper .elementor-button,
.elementor-1260 .elementor-element-2bb477 .elementor-button {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	padding: 8px 10px !important;
	font-size: 16px !important;
	color: #d6d1c4 !important;
	fill: #d6d1c4 !important;
	transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
	            fill 0.3s cubic-bezier(0.4, 0, 0.2, 1),
	            transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.elementor-1260 .etheme-elementor-off-canvas__toggle .elementor-button:hover,
.elementor-1260 .elementor-element-2bb477 .elementor-button:hover {
	color: #c8a96a !important;
	fill: #c8a96a !important;
	transform: scale(1.1) !important;
}
.elementor-1260 .etheme-elementor-off-canvas__toggle,
.elementor-1260 .etheme-elementor-off-canvas__toggle_wrapper,
.elementor-1260 .elementor-element-2bb477 > * {
	border: none !important;
	background: none !important;
	box-shadow: none !important;
}
/* Badge quantité panier — discret */
.elementor-1260 .etheme-elementor-off-canvas__toggle .elementor-button .elementor-button-icon-qty {
	background-color: var(--ne-amber) !important;
	fill: var(--ne-noir) !important;
	color: var(--ne-noir) !important;
	font-size: 10px !important;
	min-width: 1.1em !important;
	height: 1.1em !important;
}
/* Conteneur icônes — espacement réduit */
.elementor-1260 .elementor-element-2bb477 {
	--column-gap: 16px !important;
	gap: 16px !important;
}

/* Recherche — bloc unifié, sans bordures internes ni gaps */
.elementor-1260 .elementor-element-25f39100 {
	max-width: 200px !important;
	--s-min-height: 36px !important;
	--s-border-radius: 2px !important;
	--s-border-width: 0 !important;
	--s-form-shadow: none !important;
}
/* Form — pas de bordure propre (le wrapper la porte) */
.elementor-1260 .elementor-element-25f39100 .etheme-search-form {
	border: none !important;
	background: transparent !important;
}
/* Conteneur principal — une seule bordure extérieure */
.elementor-1260 .elementor-element-25f39100 .etheme-search-input-form-wrapper {
	display: flex !important;
	align-items: center !important;
	min-height: 36px !important;
	border: 1px solid rgba(236, 230, 219, 0.2) !important;
	border-radius: 2px !important;
	background-color: rgba(26, 26, 26, 0.9) !important;
	overflow: hidden !important;
	box-shadow: none !important;
}
/* Input et wrapper input — sans bordure */
.elementor-1260 .etheme-search-form-input,
.elementor-1260 .etheme-search-input-wrapper {
	background: transparent !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}
.elementor-1260 .etheme-search-form-input {
	color: var(--ne-ivoire) !important;
	font-size: 13px !important;
	padding: 8px 12px !important;
}
.elementor-1260 .etheme-search-form-input::placeholder {
	color: rgba(236, 230, 219, 0.5) !important;
}
/* Bouton submit — aucune bordure, fond, ni ombre (Elementor/XStore) */
.elementor-1260 .etheme-search-form-submit,
.elementor-1260 .etheme-search-form-button-wrapper,
.elementor-1260 .etheme-search-form-button-wrapper button,
.elementor-1260 .elementor-element-25f39100 button[type="submit"],
.elementor-1260 .elementor-element-25f39100 .elementor-button {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
	outline: none !important;
	color: var(--ne-ivoire) !important;
	fill: var(--ne-ivoire) !important;
	font-size: 14px !important;
	padding: 8px 12px !important;
	min-width: 40px !important;
}
.elementor-1260 .etheme-search-form-submit:hover,
.elementor-1260 .etheme-search-form-button-wrapper button:hover,
.elementor-1260 .elementor-element-25f39100 .elementor-button:hover {
	color: var(--ne-amber) !important;
	fill: var(--ne-amber) !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

/* ==========================================================================
   NoirEtAmber — Phase 2 : Footer #1257
   fond #161616 | texte ivoire | structure 3–4 colonnes | typo élégante
   ========================================================================== */
.elementor-1257,
.elementor-location-footer .elementor-1257 {
	background-color: var(--ne-noir-charbon) !important;
}

/* Conteneur principal footer */
.elementor-1257 .elementor-element-3d4b679 {
	background-color: var(--ne-noir-charbon) !important;
	padding-top: 100px !important;
	padding-bottom: 80px !important;
}

/* Ligne séparatrice colonnes */
.elementor-1257 .elementor-element-28b8fb3a {
	border-color: rgba(236, 230, 219, 0.15) !important;
}

/* Titres footer */
.elementor-1257 .elementor-heading-title,
.elementor-1257 .item-title-holder .menu-title {
	font-family: "Playfair Display", Georgia, serif !important;
	color: var(--ne-ivoire) !important;
}

/* Texte footer */
.elementor-1257 .elementor-widget-text-editor,
.elementor-1257 .subitem-title-holder .menu-title,
.elementor-1257 p {
	color: var(--ne-ivoire-doux) !important;
}

/* Liens footer */
.elementor-1257 a {
	color: var(--ne-ivoire-doux);
}
.elementor-1257 a:hover {
	color: var(--ne-amber) !important;
}

/* Formulaire newsletter footer */
.elementor-1257 .elementor-element-4d062742 input[type="email"] {
	background-color: var(--ne-gris-charbon) !important;
	border-color: rgba(236, 230, 219, 0.2) !important;
	color: var(--ne-ivoire) !important;
}
.elementor-1257 .elementor-element-4d062742 input[type="email"]::placeholder {
	color: var(--ne-ivoire-doux);
	opacity: 0.6;
}
.elementor-1257 .elementor-element-4d062742 input[type="submit"] {
	background-color: var(--ne-ivoire) !important;
	color: var(--ne-noir) !important;
	border: none !important;
}
.elementor-1257 .elementor-element-4d062742 input[type="submit"]:hover {
	background-color: var(--ne-amber) !important;
	color: var(--ne-ivoire) !important;
}

/* Icônes réseaux sociaux footer */
.elementor-1257 .elementor-social-icon {
	color: var(--ne-ivoire-doux) !important;
}
.elementor-1257 .elementor-social-icon:hover {
	color: var(--ne-amber) !important;
}

/* Copyright / bas de footer */
.elementor-1257 .elementor-element-488e7ab2,
.elementor-1257 .elementor-element-107ed7b {
	color: var(--ne-ivoire-doux) !important;
}

/* NoirEtAmber — Cartes variation taille/format premium (mobile-first) */
.ne-size-select-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
	opacity: 0 !important;
	pointer-events: none !important;
}
.ne-size-cards { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.ne-size-card {
	display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
	width: 100%; min-height: 60px; padding: 16px 20px;
	background-color: var(--ne-gris-charbon, #1a1a1a);
	border: 1px solid rgba(236, 230, 219, 0.15); border-radius: 2px;
	color: var(--ne-ivoire, #ece6db);
	font-family: "DM Sans", sans-serif; text-align: left; cursor: pointer;
	transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
	-webkit-tap-highlight-color: transparent;
}
.ne-size-card:hover { border-color: rgba(236, 230, 219, 0.35); }
.ne-size-card.is-selected {
	border-color: var(--ne-amber, #c55a17);
	background-color: rgba(197, 90, 23, 0.12);
	box-shadow: 0 0 0 1px var(--ne-amber);
}
.ne-size-card:focus { outline: none; box-shadow: 0 0 0 2px var(--ne-amber); }
.ne-size-card-title { font-family: "Playfair Display", Georgia, serif; font-size: 17px; font-weight: 500; }
.ne-size-card-dims { display: block; margin-top: 4px; font-size: 13px; color: var(--ne-ivoire-doux, #d4cfc5); }
@media (min-width: 600px) {
	.ne-size-cards { flex-direction: row; flex-wrap: wrap; gap: 14px; }
	.ne-size-card { flex: 1 1 calc(50% - 7px); min-width: 200px; }
}
@media (min-width: 900px) {
	.ne-size-card { flex: 1 1 calc(33.333% - 10px); }
}