/* =====================================================================
   Vulcan' Affûtage — DA 2.0 : menu mobile global (« le tiroir de forge »)
   Chargé sur TOUTES les pages publiques (base.html.twig) : autonome, avec
   fallback sur chaque token --v2-* (ds-v2.css n'est présent que sur les
   pages new*).

   Le tiroir vit HORS de <header class="header-small"> : ce header porte un
   z-index (15, ou 1000 en DA 2.0) qui créerait un contexte d'empilement et
   ferait passer la bande d'annonce (z 1200) par-dessus le menu. Racine
   .v2nav en position fixed, z-index 3000 : au-dessus de la bande, du panneau
   cookies (900) et du bouton « haut de page » (900), sous les toasts (4000).

   Matière : basalte radial + hachures braise + lueur verte, même recette que
   le pied de page et le bandeau cookies. Signature : « le fil » — l'arête
   verte affûtée, ici verticale, sur le bord du tiroir.
   ===================================================================== */

/* ==================== Bouton burger (pilule mobile) ==================== */
/* Les trois barres, bouts arrondis, sans cadre. Le fichier n'étant chargé
   que par base.html.twig, l'admin historique (base-admin) n'est pas touché. */
.burger-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	background: none;
	color: var(--v2-ink, #191713);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.burger-btn svg { width: 28px; height: 28px; display: block; }
.burger-btn svg rect { rx: 6px; }
.burger-btn:active { transform: scale(0.94); }
.burger-btn:focus-visible {
	outline: 2px solid var(--v2-green, #2D9446);
	outline-offset: 4px;
	border-radius: 6px;
}

/* ==================== Racine + voile ==================== */
/* Jamais rendu en grand format : le tiroir n'existe que là où la pilule
   mobile prend la main (même seuil que .header-small dans styles.css).
   `display:none` par défaut => aucun élément focusable en trop sur PC. */
.v2nav {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 3000;
	pointer-events: none;
	font-family: var(--v2-font-sans, "Inter", system-ui, -apple-system, "Segoe UI", sans-serif);
}

@media only screen and (max-width: 800px) {
	.v2nav { display: block; }
}
.v2nav.is-open { pointer-events: auto; }
.v2nav * { box-sizing: border-box; }

.v2nav-scrim {
	position: absolute;
	inset: 0;
	background: rgba(9, 8, 6, 0.62);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity 0.38s var(--v2-ease, cubic-bezier(0.22, 1, 0.36, 1));
}
.v2nav.is-open .v2nav-scrim { opacity: 1; }

/* ==================== Le tiroir ==================== */
.v2nav-panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(90vw, 400px);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: radial-gradient(125% 85% at 100% 0%, #241f18 0%, var(--v2-forge, #15130F) 60%);
	border-left: 1px solid rgba(237, 235, 229, 0.10);
	box-shadow: -26px 0 54px -22px rgba(0, 0, 0, 0.65);
	color: var(--v2-paper, #EDEBE5);
	transform: translateX(101%);
	visibility: hidden;
	transition:
		transform 0.42s var(--v2-ease, cubic-bezier(0.22, 1, 0.36, 1)),
		visibility 0s linear 0.42s;
}
.v2nav.is-open .v2nav-panel {
	transform: none;
	visibility: visible;
	transition:
		transform 0.42s var(--v2-ease, cubic-bezier(0.22, 1, 0.36, 1)),
		visibility 0s;
}

/* matière : hachures braise + lueur verte en pied (écho du footer) */
.v2nav-panel::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		repeating-linear-gradient(115deg, rgba(217, 98, 43, 0.035) 0 2px, transparent 2px 40px),
		radial-gradient(80% 45% at 0% 100%, rgba(55, 180, 87, 0.10), transparent 65%);
}

/* « le fil » : l'arête fraîchement affûtée, verticale sur le bord du tiroir */
.v2nav-edge {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 2px;
	background: linear-gradient(180deg,
		transparent 0%,
		rgba(45, 148, 70, 0.55) 14%,
		var(--v2-green-glow, #37B457) 48%,
		rgba(45, 148, 70, 0.5) 82%,
		transparent 100%);
	box-shadow: 0 0 14px rgba(55, 180, 87, 0.35);
	pointer-events: none;
}

/* ==================== En-tête du tiroir ==================== */
.v2nav-head {
	position: relative;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 14px 14px 20px;
	border-bottom: 1px solid rgba(237, 235, 229, 0.09);
}

.v2nav-brand {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	/* min-width: 0 sur toute la chaîne : la marque se comprime avant de
	   pousser la croix hors du tiroir sur les écrans étroits */
	flex: 0 1 auto;
	min-width: 0;
	text-decoration: none;
	color: inherit;
	border-radius: 8px;
}
.v2nav-brand-logo {
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid rgba(237, 235, 229, 0.12);
}
.v2nav-brand-copy {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1;
}
.v2nav-brand-name {
	font-family: var(--v2-font-display, "Fraunces", "Iowan Old Style", Georgia, serif);
	font-weight: 600;
	font-size: 1.14rem;
	letter-spacing: -0.01em;
	color: var(--v2-paper, #EDEBE5);
	font-optical-sizing: auto;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.v2nav-brand-tagline {
	margin-top: 5px;
	font-size: 0.53rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--v2-smoke, #A7A296);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* liseré bleu-blanc-rouge : même signature que l'en-tête grand format */
.v2nav-brand-flag {
	display: block;
	margin-top: 6px;
	height: 2px;
	border-radius: 2px;
	opacity: 0.75;
	background: linear-gradient(90deg, #35529E 0 33.4%, rgba(255, 255, 255, 0.85) 33.4% 66.6%, #C8382B 66.6% 100%);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}

/* Croix : deux barres aux bouts arrondis (impossible sur un path plein) */
.v2nav-close {
	flex: none;
	position: relative;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	-webkit-appearance: none;
	appearance: none;
	border: 1px solid rgba(237, 235, 229, 0.14);
	border-radius: 50%;
	background: rgba(237, 235, 229, 0.04);
	color: var(--v2-paper, #EDEBE5);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: transform 0.28s var(--v2-ease, ease), border-color 0.2s ease, background 0.2s ease;
}
.v2nav-close::before,
.v2nav-close::after {
	content: "";
	position: absolute;
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}
.v2nav-close::before { transform: rotate(45deg); }
.v2nav-close::after { transform: rotate(-45deg); }
.v2nav-close:hover,
.v2nav-close:focus-visible {
	border-color: rgba(55, 180, 87, 0.55);
	background: rgba(55, 180, 87, 0.10);
	transform: rotate(90deg);
}

/* ==================== Corps défilant ==================== */
.v2nav-body {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	/* colonne flex : le tampon d'atelier (margin-top:auto) tombe en pied de
	   tiroir quand la liste est courte, et reprend le fil quand elle déborde */
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	padding: 18px 16px 30px;
	/* pied : la dernière ligne s'arrête au-dessus du voile du dock */
	scrollbar-width: thin;
	scrollbar-color: rgba(237, 235, 229, 0.22) transparent;
}
/* sans quoi, en colonne flex, les blocs se compriment au lieu de défiler */
.v2nav-body > * { flex: none; }
.v2nav-body::-webkit-scrollbar { width: 5px; }
.v2nav-body::-webkit-scrollbar-track { background: transparent; }
.v2nav-body::-webkit-scrollbar-thumb {
	background: rgba(237, 235, 229, 0.18);
	border-radius: 999px;
}

/* Intertitre mono à tick braise — même grammaire que les colonnes du footer */
.v2nav-eyebrow {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 10px;
	padding-left: 4px;
	font-family: var(--v2-font-mono, "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace);
	font-size: 0.62rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--v2-smoke, #A7A296);
}
.v2nav-eyebrow::before {
	content: "";
	width: 16px;
	height: 2px;
	flex: none;
	background: var(--v2-ember, #D9622B);
}
.v2nav-eyebrow + .v2nav-list { margin-bottom: 22px; }

.v2nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* ==================== Lignes de navigation ==================== */
/* <a> et <button> partagent la même ligne : un seul rythme vertical. */
.v2nav-link {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	margin: 0;
	padding: 12px 14px;
	-webkit-appearance: none;
	appearance: none;
	border: none;
	border-radius: 11px;
	background: transparent;
	color: var(--v2-paper, #EDEBE5);
	font-family: var(--v2-font-display, "Fraunces", "Iowan Old Style", Georgia, serif);
	font-size: 1.04rem;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.005em;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	font-optical-sizing: auto;
	transition: background-color 0.18s ease, color 0.18s ease;
}
.v2nav-link > span { flex: 1 1 auto; min-width: 0; }
.v2nav-link:hover { background-color: rgba(237, 235, 229, 0.06); }
.v2nav-link:active { background-color: rgba(237, 235, 229, 0.10); }
.v2nav-link:focus-visible {
	outline: 2px solid var(--v2-green-glow, #37B457);
	outline-offset: -2px;
}

/* Page courante : liseré vert à gauche + fond vert très dilué */
.v2nav-link[aria-current="page"] {
	background-color: rgba(45, 148, 70, 0.14);
	color: #fff;
}
.v2nav-link[aria-current="page"]::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 20px;
	border-radius: 2px;
	background: var(--v2-green-glow, #37B457);
	box-shadow: 0 0 10px rgba(55, 180, 87, 0.5);
}

/* Icône de ligne (panier, compte) */
.v2nav-ico {
	flex: none;
	width: 20px;
	height: 20px;
	display: block;
	color: var(--v2-smoke, #A7A296);
	fill: currentColor;
}
.v2nav-link:hover .v2nav-ico,
.v2nav-link[aria-current="page"] .v2nav-ico { color: var(--v2-green-glow, #37B457); }

/* Compteur du panier — mis à jour par addToCartAjax() (.cart-badge-count) */
.v2nav-badge {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--v2-green, #2D9446);
	color: #fff;
	font-family: var(--v2-font-mono, "IBM Plex Mono", monospace);
	font-size: 0.66rem;
	font-weight: 600;
	line-height: 1;
}

/* Chevron des dépliants : pointe à droite, pivote de 90° à l'ouverture */
.v2nav-chevron {
	flex: none;
	width: 18px;
	height: 18px;
	display: block;
	color: var(--v2-smoke, #A7A296);
	transition: transform 0.3s var(--v2-ease, ease), color 0.2s ease;
}
.v2nav-toggle[aria-expanded="true"] .v2nav-chevron {
	transform: rotate(90deg);
	color: var(--v2-green-glow, #37B457);
}

/* ==================== Dépliants (grid 0fr → 1fr) ==================== */
/* Même technique que le mega-menu grand format : hauteur animée sans JS de
   mesure, et `visibility` pour sortir les liens repliés du parcours clavier.
   L'imbrication fonctionne : le parent en 1fr suit la hauteur de l'enfant. */
.v2nav-drawer {
	display: grid;
	grid-template-rows: 0fr;
	visibility: hidden;
	opacity: 0;
	transition:
		grid-template-rows 0.34s var(--v2-ease, cubic-bezier(0.22, 1, 0.36, 1)),
		opacity 0.22s ease,
		visibility 0s linear 0.34s;
}
.v2nav-drawer.is-open {
	grid-template-rows: 1fr;
	visibility: visible;
	opacity: 1;
	transition:
		grid-template-rows 0.34s var(--v2-ease, cubic-bezier(0.22, 1, 0.36, 1)),
		opacity 0.28s ease 0.06s,
		visibility 0s;
}
.v2nav-drawer-inner {
	min-height: 0;
	overflow: hidden;
}

/* Sous-liste : filet vertical à gauche, comme les branches du mega-menu */
.v2nav-sublist {
	list-style: none;
	margin: 4px 0 8px 15px;
	padding: 2px 0 2px 11px;
	border-left: 1px solid rgba(237, 235, 229, 0.13);
	display: flex;
	flex-direction: column;
	gap: 1px;
}

/* Niveau 2 : Inter, plus discret que les entrées principales */
.v2nav-sublist .v2nav-link {
	padding: 10px 12px;
	border-radius: 9px;
	font-family: var(--v2-font-sans, "Inter", system-ui, sans-serif);
	font-size: 0.93rem;
	font-weight: 500;
	color: var(--v2-smoke, #A7A296);
}
.v2nav-sublist .v2nav-link:hover { color: var(--v2-paper, #EDEBE5); }
.v2nav-sublist .v2nav-link[aria-current="page"] { color: #fff; }
.v2nav-sublist .v2nav-link[aria-current="page"]::before { left: -12px; height: 17px; }

/* Niveau 3 : encore un cran plus bas */
.v2nav-sublist .v2nav-sublist {
	margin-left: 10px;
	padding-left: 10px;
}
.v2nav-sublist .v2nav-sublist .v2nav-link {
	padding: 9px 12px;
	font-size: 0.87rem;
}

/* Tampon d'atelier : signature mono à point braise, reprise du pied de page.
   Ferme le tiroir sur une note de marque plutôt que sur du vide. */
.v2nav-stamp {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: auto 0 0;   /* auto : collé au bas du tiroir quand la place le permet */
	padding: 26px 4px 2px;
	font-family: var(--v2-font-mono, "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace);
	font-size: 0.62rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(167, 162, 150, 0.7);
}
.v2nav-stamp::before {
	content: "";
	width: 6px;
	height: 6px;
	flex: none;
	border-radius: 50%;
	background: var(--v2-ember, #D9622B);
}

/* ==================== Dock : carte cadeau + réseaux ==================== */
/* Hors de la zone défilante : rien ne peut passer derrière. Le voile en
   dégradé au-dessus éteint le contenu qui arrive au ras du dock — la coupure
   se lit comme une ombre portée, pas comme un chevauchement. */
.v2nav-dock {
	position: relative;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px 12px;
	padding: 14px 16px;
	padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid rgba(237, 235, 229, 0.10);
	background: rgba(18, 16, 13, 0.94);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
.v2nav-dock::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 34px;
	pointer-events: none;
	background: linear-gradient(to top, rgba(18, 16, 13, 0.94), rgba(18, 16, 13, 0.6) 45%, rgba(18, 16, 13, 0));
}

/* Invite carte cadeau : bouton vert texturé, transposition sur fond sombre
   du .hsm-gift du mega-menu (mêmes hachures à 115°, même lueur en bas à
   gauche) — ici en vert lumineux, seul lisible sur le basalte. */
.v2nav-gift {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
	padding: 11px 14px;
	border: 1px solid rgba(55, 180, 87, 0.42);
	border-radius: 999px;
	background:
		repeating-linear-gradient(115deg, rgba(55, 180, 87, 0.12) 0 2px, transparent 2px 14px),
		radial-gradient(130% 140% at 0% 100%, rgba(55, 180, 87, 0.26), transparent 62%),
		rgba(45, 148, 70, 0.13);
	color: var(--v2-green-glow, #37B457);
	font-size: 0.81rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.v2nav-gift svg { flex: none; width: 16px; height: 16px; display: block; }
.v2nav-gift:hover,
.v2nav-gift:focus-visible {
	background-color: rgba(45, 148, 70, 0.24);
	border-color: rgba(55, 180, 87, 0.75);
	color: #fff;
}
.v2nav-gift:active { transform: scale(0.97); }

/* Réseaux : pastilles rondes, mêmes proportions que le pied de page.
   margin-left auto : même passées à la ligne (écran très étroit), elles
   restent calées à droite — l'invite carte cadeau garde le coin gauche. */
.v2nav-social { display: flex; gap: 8px; flex: none; margin-left: auto; }
.v2nav-soc {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid rgba(237, 235, 229, 0.16);
	color: var(--v2-smoke, #A7A296);
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	transition: color 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}
.v2nav-soc svg { width: 16px; height: 16px; display: block; fill: currentColor; }
.v2nav-soc:hover,
.v2nav-soc:focus-visible {
	color: var(--v2-paper, #EDEBE5);
	border-color: var(--v2-green-glow, #37B457);
	transform: translateY(-2px);
}

.v2nav a:focus-visible,
.v2nav button:focus-visible {
	outline: 2px solid var(--v2-green-glow, #37B457);
	outline-offset: 2px;
}

/* ==================== Verrou de défilement ==================== */
/* Le <body> passe en position fixe pendant l'ouverture (seule méthode fiable
   sur iOS) : le décalage est rendu par le JS, qui restaure ensuite la
   position exacte. */
body.v2nav-lock {
	position: fixed;
	left: 0;
	right: 0;
	width: 100%;
	overflow: hidden;
}

/* ==================== Petits écrans ==================== */
/* La largeur reste à 90vw : la bande de voile qui subsiste à gauche (≈ 32 px
   sur un 320 px) doit rester touchable — c'est le geste « je referme ». */
@media only screen and (max-width: 380px) {
	.v2nav-body { padding-left: 12px; padding-right: 12px; }
	.v2nav-head { padding: 14px 12px 12px 16px; gap: 8px; }
	.v2nav-brand { gap: 9px; }
	.v2nav-brand-logo { width: 40px; height: 40px; flex-basis: 40px; }
	.v2nav-brand-name { font-size: 1.02rem; }
	.v2nav-brand-tagline { font-size: 0.45rem; letter-spacing: 0.05em; }
	.v2nav-close { width: 38px; height: 38px; }
	.v2nav-gift { padding: 10px 12px; font-size: 0.78rem; }
	.v2nav-soc { width: 34px; height: 34px; }
	.v2nav-link { font-size: 1rem; }
}

/* Écrans bas (paysage) : on récupère de la hauteur sur l'en-tête */
@media only screen and (max-height: 520px) {
	.v2nav-head { padding-top: 10px; padding-bottom: 10px; }
	.v2nav-brand-logo { width: 36px; height: 36px; flex-basis: 36px; }
	.v2nav-link { padding-top: 10px; padding-bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.v2nav-scrim,
	.v2nav-panel,
	.v2nav-drawer,
	.v2nav-chevron,
	.v2nav-close,
	.v2nav-link,
	.v2nav-gift,
	.v2nav-soc,
	.burger-btn {
		/* le délai compte autant que la durée : sans lui, `visibility` resterait
		   en attente 0,42 s après la fermeture */
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
	}
	.v2nav-close:hover,
	.v2nav-soc:hover,
	.v2nav-gift:active,
	.burger-btn:active { transform: none; }
}