/* ============================================================
   LA BOUSSOLE — HOME PREMIUM (Phase 10)
   Bespoke front-page.php extensions. Loaded AFTER the legacy
   homepage sheets, so these refinements win the cascade while
   reusing the existing design tokens and hero/stats/panels system.
   ============================================================ */

/* ============================================================
   1 · SHARED / SECTION RHYTHM
   ============================================================ */
.lbs-center { text-align: center; }

.lbs-section-stats { background: var(--lbs-primary); }

/* Dark sections: make section titles/subtitles legible on navy. */
.lbs-section-dark .lbs-section-title,
.lbs-section-intervenants .lbs-section-title { color: var(--lbs-white); }
.lbs-section-dark .lbs-section-subtitle,
.lbs-section-intervenants .lbs-section-subtitle { color: rgba(255,255,255,0.66); }

.lbs-expo-cta { margin-top: var(--lbs-space-2xl); }
.lbs-expo-cta .lbs-btn { min-height: 52px; }
.lbs-section[id="exposants"] p:not(.lbs-eyebrow):not(.lbs-section-subtitle) { margin: 0; }

/* ============================================================
   2 · HERO POST-PROCESSING
   ============================================================ */
/* Canonical hero — fullscreen single veil, flex-centered content */
.lbs-hero {
	min-height: 100vh; min-height: 100svh;
	align-items: center; justify-content: center;
}
.lbs-hero-overlay {
	position: absolute; inset: 0; z-index: 1;
	display: flex; align-items: center; justify-content: center;
	background: rgba(5, 18, 38, 0.45);
}
.lbs-hero-content {
	position: relative; z-index: 2;
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	text-align: center; width: 100%; max-width: 850px;
	margin: 0 auto; padding: 0;
	gap: clamp(0.875rem, 2vh, 1.5rem);
	color: var(--lbs-white);
}
.lbs-hero-content .lbs-hero-eyebrow,
.lbs-hero-content .lbs-hero-title,
.lbs-hero-content .lbs-hero-subtitle,
.lbs-hero-content .lbs-hero-location,
.lbs-hero-content .lbs-hero-countdown { margin-bottom: 0; }

/* Title must read as one solid white mass — the blue highlight blends into the
   blue banners/logo in the video loop and disappears. */
.lbs-hero-content .lbs-hero-highlight { color: var(--lbs-white); }
/* Location was the least readable element (dim grey) — promote it to white. */
.lbs-hero-content .lbs-hero-location { color: var(--lbs-white); }

/* Text protection — holds legibility on ANY frame of the video loop without
   darkening the image; uniform for title, subtitle, location, countdown. */
.lbs-hero-content,
.lbs-hero-content .lbs-hero-eyebrow,
.lbs-hero-content .lbs-hero-title,
.lbs-hero-content .lbs-hero-subtitle,
.lbs-hero-content .lbs-hero-location,
.lbs-hero-content .lbs-countdown__number,
.lbs-hero-content .lbs-countdown__label {
	text-shadow: 0 2px 12px rgba(5, 18, 38, 0.6);
}

.lbs-hero-actions .lbs-btn,
.lbs-cta-actions .lbs-btn { min-height: 52px; }

/* Section-level action buttons (LOT A · A4 / LOT A-bis · Partie 1)
   Alignment moved to assets/css/components.css (§9 CTA ALIGNMENT):
   the wrapper no longer forces centering — a modifier per section does. */
.lbs-section-cta .lbs-btn { margin: 0; }

/* Ghost on dark sections: white border/text (stats navy, intervenants navy) */
.lbs-section-dark .lbs-btn--ghost,
.lbs-section-intervenants .lbs-btn--ghost {
	background: transparent; border-color: rgba(255,255,255,0.45); color: var(--lbs-white);
}
.lbs-section-dark .lbs-btn--ghost:hover,
.lbs-section-intervenants .lbs-btn--ghost:hover {
	background: var(--lbs-white); border-color: var(--lbs-white); color: var(--lbs-primary);
}

.lbs-hero-actions .lbs-btn--primary {
	background: var(--lbs-accent); border-color: var(--lbs-accent); color: var(--lbs-white);
}
.lbs-hero-actions .lbs-btn--primary:hover {
	background: var(--lbs-accent-hover); border-color: var(--lbs-accent-hover);
	transform: translateY(-2px); box-shadow: var(--lbs-shadow-lg);
}
.lbs-hero-actions .lbs-btn--ghost {
	background: transparent; border-color: rgba(255,255,255,0.45); color: var(--lbs-white);
}
.lbs-hero-actions .lbs-btn--ghost:hover {
	background: var(--lbs-white); border-color: var(--lbs-white); color: var(--lbs-primary);
	transform: translateY(-2px); box-shadow: var(--lbs-shadow-lg);
}

/* The class sits ON the <video> itself in front-page.php (no figure wrapper),
   so the legacy descendant selector never matched and the video
   letterboxed (object-fit stayed `contain`). Target the classed element
   directly — covers both <video class="lbs-hero-video"> and figure > video. */
.lbs-hero-video,
.lbs-hero-video video {
	object-fit: cover; object-position: center;
	width: 100%; height: 100%;
	filter: saturate(0.92) contrast(1.05);
}

/* ============================================================
   3 · TRANSITION BANNERS
   Blurred image layer (::before) + colour overlay (::after)
   + white text — same treatment as the .lbs-banner system.
   ============================================================ */
.lbs-transition {
	padding: clamp(3.5rem, 9vw, 7rem) 0;
	text-align: center; color: var(--lbs-white);
	overflow: hidden; position: relative;
}
.lbs-transition::before {
	content: ''; position: absolute; inset: -12px;
	background-size: cover; background-position: center;
	filter: blur(4px); -webkit-filter: blur(4px); z-index: 0;
}
.lbs-transition::after {
	content: ''; position: absolute; inset: 0;
	background: var(--lbs-transition-overlay, rgba(10, 22, 40, 0.78));
	z-index: 0;
}
.lbs-transition .lbs-container { position: relative; z-index: 1; }
.lbs-transition--navy {
	--lbs-transition-overlay: linear-gradient(135deg, rgba(10,22,40,0.86) 0%, rgba(8,30,60,0.82) 100%);
}
.lbs-transition--navy::before { background-image: url('../images/banner/banner-3.webp'); }
.lbs-transition--coral {
	--lbs-transition-overlay: linear-gradient(135deg, rgba(232,69,69,0.85) 0%, rgba(214,48,48,0.83) 100%);
}
.lbs-transition--coral::before { background-image: url('../images/banner/banner-5.webp'); }

/* LOT 5 — transitions d'arrière-plan : variante selon la largeur d'écran.
   Même logique que pour .lbs-banner dans components.css : l'original ci-dessus
   sert au-delà de 1200 px, une version allégée en dessous. cover gère
   l'adaptation, donc aucun décalage de mise en page possible. L'ordre du plus
   large au plus étroit est celui du cascade. */
@media (max-width: 1200px) {
	.lbs-transition--navy::before { background-image: url('../images/banner/banner-3-1200.webp'); }
	.lbs-transition--coral::before { background-image: url('../images/banner/banner-5-1200.webp'); }
}
@media (max-width: 768px) {
	.lbs-transition--navy::before { background-image: url('../images/banner/banner-3-768.webp'); }
	.lbs-transition--coral::before { background-image: url('../images/banner/banner-5-768.webp'); }
}
@media (max-width: 480px) {
	.lbs-transition--navy::before { background-image: url('../images/banner/banner-3-480.webp'); }
	.lbs-transition--coral::before { background-image: url('../images/banner/banner-5-480.webp'); }
}
.lbs-transition-text {
	font-family: var(--lbs-font-heading);
	font-size: clamp(1.9rem, 5vw, 3.75rem);
	font-weight: var(--lbs-fw-extrabold);
	line-height: 1.18; letter-spacing: 0.02em;
	text-transform: uppercase; margin: 0; color: var(--lbs-white);
	position: relative; z-index: 1;
}

/* ============================================================
   3b · SECTION BANNER — EXPOSEZ (section 12) only
   ============================================================ */
.lbs-section-banner--exposer::after { background-image: url('../images/banner/banner-6.webp'); }

/* LOT 5 — même variante responsive que les autres bannières. */
@media (max-width: 1200px) {
	.lbs-section-banner--exposer::after { background-image: url('../images/banner/banner-6-1200.webp'); }
}
@media (max-width: 768px) {
	.lbs-section-banner--exposer::after { background-image: url('../images/banner/banner-6-768.webp'); }
}
@media (max-width: 480px) {
	.lbs-section-banner--exposer::after { background-image: url('../images/banner/banner-6-480.webp'); }
}
/* LOT F · P5 — Overlay 0.75 (opacité mesurée en pixel, voir RAPPORT-LOTF). */
.lbs-section-banner--exposer { --lbs-section-overlay: rgba(27, 58, 107, 0.75); }

/* Content forced to white on the dark overlay */
.lbs-section-banner .lbs-eyebrow,
.lbs-section-banner .lbs-about-content .lbs-eyebrow { color: #7EB2EF; }
.lbs-section-banner .lbs-about-content h2,
.lbs-section-banner .lbs-section-title { color: var(--lbs-white); }
.lbs-section-banner .lbs-about-content p,
.lbs-section-banner .lbs-section-subtitle { color: rgba(255,255,255,0.86); }
.lbs-section-banner .lbs-text-accent { color: var(--lbs-white) !important; }

/* ============================================================
   4 · AUBOUTENANT · INTERVENANTS (dark premium)
   ============================================================ */
.lbs-section-intervenants {
	background: linear-gradient(160deg, var(--lbs-primary) 0%, #10233F 55%, #0F2A55 100%);
}
.lbs-section-intervenants .lbs-intervenants-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* LOT F · P2 — cartes blanc pur « image pleine carte » (géométrie dans
   homepage-blocks.css) ; ici : look premium + interaction hover élévation. */
.lbs-section-intervenants .lbs-intervenant-card {
	background: var(--lbs-white);
	border: 0;
	box-shadow: var(--lbs-shadow-card);
	border-radius: var(--lbs-radius-lg);
	overflow: hidden;
	transition: transform var(--lbs-transition-base), box-shadow var(--lbs-transition-base);
}
.lbs-section-intervenants .lbs-intervenant-card:hover {
	background: var(--lbs-white);
	transform: translateY(-4px);
	box-shadow: var(--lbs-shadow-card-hover);
}
.lbs-section-intervenants .lbs-intervenant-media::after {
	background: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,0.92) 30%, rgba(255,255,255,0) 100%);
}
.lbs-section-intervenants .lbs-intervenant-title h4 { color: var(--lbs-blue-accent); }

/* ============================================================
   5 · PANELS — editorial numbering
   ============================================================ */
.lbs-panel-card {
	border-top: 3px solid var(--lbs-accent);
	transition: transform var(--lbs-transition-base), box-shadow var(--lbs-transition-base), border-color var(--lbs-transition-base);
}
.lbs-panel-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--lbs-shadow-card-hover);
	border-top-color: var(--lbs-blue-accent);
}
.lbs-panel-number {
	display: inline-flex; align-items: center; gap: 0.5rem;
	color: var(--lbs-accent); letter-spacing: var(--lbs-ls-wider);
}
.lbs-panel-number::after {
	content: ''; width: 34px; height: 2px; background: var(--lbs-accent);
}

/* ============================================================
   7 · FLOOR PLAN — substantially larger presentation
   ============================================================ */
.lbs-section-floorplan { background: var(--lbs-gray-50); }
.lbs-plan-stage {
	overflow: hidden; border-radius: var(--lbs-radius-xl);
	background: var(--lbs-white); box-shadow: var(--lbs-shadow-card-hover);
}
.lbs-plan-stage .lbs-floorplan {
	border: none; border-radius: 0; box-shadow: none;
}
.lbs-plan-stage .lbs-floorplan__viewport {
	min-height: clamp(460px, 64vh, 740px);
	background: var(--lbs-gray-100);
}
.lbs-plan-stage .lbs-floorplan__toolbar {
	background: var(--lbs-white);
}
.lbs-plan-cta { margin: var(--lbs-space-2xl) 0 0; text-align: center; }

/* ============================================================
   8 · REGISTRATION — navy panel + white form, 45/55
   ============================================================ */
.lbs-registration-grid {
	grid-template-columns: 45fr 55fr;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: stretch;
}
.lbs-registration-info {
	background: linear-gradient(160deg, var(--lbs-primary) 0%, var(--lbs-primary-royal) 100%);
	border-radius: var(--lbs-radius-xl);
	padding: clamp(2rem, 4vw, 3rem);
	display: flex; flex-direction: column;
	position: relative; overflow: hidden;
}
.lbs-registration-info::before {
	content: ''; position: absolute; top: -40%; right: -22%;
	width: 420px; height: 420px;
	background: radial-gradient(circle, rgba(27,107,201,0.28) 0%, transparent 70%);
}
.lbs-registration-info > * { position: relative; }
.lbs-registration-info .lbs-eyebrow { color: var(--lbs-blue-accent); }
.lbs-registration-info h2 { color: var(--lbs-white); margin-bottom: var(--lbs-space-xl); }
.lbs-registration-info > p { color: rgba(255,255,255,0.78); margin-bottom: var(--lbs-space-xl); }
.lbs-registration-checklist li { color: rgba(255,255,255,0.88); }
.lbs-registration-checklist li::before {
	background: rgba(255,255,255,0.12);
	color: var(--lbs-blue-accent);
}
.lbs-registration-note {
	margin-top: auto; padding-top: var(--lbs-space-xl);
	border-top: 1px solid rgba(255,255,255,0.12);
	font-size: var(--lbs-fs-small); color: rgba(255,255,255,0.6);
}
.lbs-registration-info .lbs-registration-note { margin-bottom: 0; }
.lbs-registration-form-card {
	background: var(--lbs-white);
	border-radius: var(--lbs-radius-xl);
	box-shadow: var(--lbs-shadow-card);
	padding: clamp(1.75rem, 3vw, 2.5rem);
}
.lbs-registration-form-card h3 { text-align: center; margin-bottom: var(--lbs-space-xl); }

/* ============================================================
   9 · INFORMATIONS PRATIQUES — lead panel + numbered modules
   ============================================================ */
.lbs-practical-grid {
	display: grid; grid-template-columns: 58fr 42fr;
	gap: clamp(2rem, 4vw, 4rem); align-items: stretch;
}
.lbs-practical-modules { order: 1; }
.lbs-practical-lead {
	background: linear-gradient(160deg, var(--lbs-primary) 0%, var(--lbs-primary-royal) 100%);
	border-radius: var(--lbs-radius-xl);
	padding: clamp(2rem, 4vw, 3rem);
	display: flex; flex-direction: column; order: 2;
	color: var(--lbs-white); position: relative; overflow: hidden;
}
.lbs-practical-lead::before {
	content: ''; position: absolute; bottom: -30%; left: -20%;
	width: 380px; height: 380px;
	background: radial-gradient(circle, rgba(27,107,201,0.3) 0%, transparent 70%);
}
.lbs-practical-lead > * { position: relative; }
.lbs-practical-lead .lbs-eyebrow { color: var(--lbs-blue-accent); }
.lbs-practical-lead .lbs-section-title { color: var(--lbs-white); margin-bottom: auto; }
.lbs-practical-date {
	font-family: var(--lbs-font-heading);
	font-size: clamp(2.25rem, 3.6vw, 3.25rem);
	font-weight: var(--lbs-fw-bold); line-height: 1.1;
	margin: var(--lbs-space-2xl) 0 var(--lbs-space-sm);
}
.lbs-practical-venue {
	font-size: var(--lbs-fs-caption); font-weight: var(--lbs-fw-semibold);
	text-transform: uppercase; letter-spacing: 0.18em;
	color: rgba(255,255,255,0.66); margin-bottom: var(--lbs-space-2xl);
}
.lbs-practical-lead .lbs-btn { align-self: flex-start; }

.lbs-practical-modules {
	display: flex; flex-direction: column; justify-content: center;
	gap: var(--lbs-space-lg);
}
.lbs-practical-module {
	display: flex; align-items: center; gap: var(--lbs-space-lg);
	background: var(--lbs-white);
	border: 1px solid var(--lbs-gray-200);
	border-radius: var(--lbs-radius-lg);
	padding: var(--lbs-space-lg) var(--lbs-space-xl);
	box-shadow: var(--lbs-shadow-xs);
	transition: box-shadow var(--lbs-transition-base), border-color var(--lbs-transition-base), transform var(--lbs-transition-base);
}
.lbs-practical-module:hover {
	border-color: var(--lbs-primary-light);
	box-shadow: var(--lbs-shadow-card-hover);
	transform: translateY(-2px);
}
.lbs-practical-idx {
	font-family: var(--lbs-font-heading);
	font-size: clamp(1.75rem, 2.6vw, 2.25rem);
	font-weight: var(--lbs-fw-extrabold); line-height: 1;
	color: var(--lbs-blue-accent);
	min-width: 3rem;
}
.lbs-practical-body h4 {
	font-family: var(--lbs-font-heading);
	font-size: var(--lbs-fs-body); letter-spacing: 0.12em;
	text-transform: uppercase; color: var(--lbs-primary);
	margin-bottom: 0.25rem; white-space: nowrap;
}
.lbs-practical-body p { font-size: var(--lbs-fs-small); color: var(--lbs-gray-500); margin: 0; }

/* L'ÉVÉNEMENT (non-gray): image réduite à ~45 % (LOT B · Partie 1.2),
   le texte 55 % porteur. Pas de stretch : le ratio 3/4 de l'image
   doit rester piloté par la largeur de piste (45fr), jamais par la
   hauteur de ligne — sinon le ratio l'élargit au-delà de sa colonne.
   L'image reste ainsi ≤ hauteur du bloc texte voisin. */
.lbs-section:not(.lbs-section-gray) .lbs-about-grid {
	grid-template-columns: 45fr 55fr;
	align-items: center;
}
.lbs-section:not(.lbs-section-gray) .lbs-about-content { align-self: center; }
/* Section 3 image: respect banner.webp native 3:4 portrait ratio */
.lbs-section:not(.lbs-section-gray) .lbs-about-image { aspect-ratio: 3/4; }

/* ============================================================
   10 · CONTACT — navy info panel + form card
   ============================================================ */
.lbs-contact-grid { grid-template-columns: 45fr 55fr; }
.lbs-contact-info {
	background: linear-gradient(160deg, var(--lbs-primary) 0%, var(--lbs-primary-royal) 100%);
	border-radius: var(--lbs-radius-xl);
	padding: clamp(2rem, 4vw, 3rem);
	color: var(--lbs-white);
}
.lbs-contact-info .lbs-eyebrow { color: var(--lbs-blue-accent); }
.lbs-contact-info h2 { color: var(--lbs-white); }
.lbs-contact-info > p { color: rgba(255,255,255,0.78); }
.lbs-contact-card {
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: var(--lbs-radius-md);
	padding: var(--lbs-space-lg);
}
.lbs-contact-card h4 { color: var(--lbs-white); letter-spacing: 0.12em; }
.lbs-contact-card p { color: rgba(255,255,255,0.82); }
.lbs-contact-form-card { border-radius: var(--lbs-radius-xl); box-shadow: var(--lbs-shadow-card); }
.lbs-form-title { text-align: left; }

/* ============================================================
   12 · FINAL CTA — buttons + glow
   ============================================================ */
.lbs-cta-section { position: relative; overflow: hidden; }
.lbs-cta-section::after {
	content: ''; position: absolute; top: -60%; left: 50%;
	transform: translateX(-50%);
	width: 900px; height: 900px;
	background: radial-gradient(circle, rgba(27,107,201,0.18) 0%, transparent 65%);
	pointer-events: none;
}
.lbs-cta-content { position: relative; z-index: 1; }
.lbs-cta-content h2 { font-size: clamp(2rem, 4.5vw, 3.75rem); letter-spacing: 0.02em; }
.lbs-cta-actions { justify-content: center; }
.lbs-cta-actions .lbs-btn {
	background: transparent;
}
.lbs-cta-actions .lbs-btn--primary { background: var(--lbs-accent); border-color: var(--lbs-accent); }
.lbs-cta-actions .lbs-btn--primary:hover {
	background: var(--lbs-accent-hover); border-color: var(--lbs-accent-hover);
	transform: translateY(-2px); box-shadow: var(--lbs-shadow-lg);
}
.lbs-cta-actions .lbs-btn--ghost {
	background: transparent; border-color: rgba(255,255,255,0.45); color: var(--lbs-white);
}
.lbs-cta-actions .lbs-btn--ghost:hover {
	background: var(--lbs-white); color: var(--lbs-primary); border-color: var(--lbs-white);
	transform: translateY(-2px); box-shadow: var(--lbs-shadow-lg);
}

/* ============================================================
   13 · EDITORIAL IMAGES — subtle cinematic scale on reveal
   ============================================================ */
.lbs-about-grid .lbs-about-image img {
	transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.lbs-about-grid.visible .lbs-about-image img { transform: scale(1.045); }

/* ============================================================
   14 · RESPONSIVE
   ============================================================ */

/* ⇤ 1200 — laptop */
@media (max-width: 1200px) {
	.lbs-practical-grid { grid-template-columns: 1fr; }
	.lbs-practical-lead .lbs-btn { align-self: flex-start; }
}

/* ⇤ 1024 — tablet landscape */
@media (max-width: 1024px) {
	.lbs-contact-grid { grid-template-columns: minmax(0, 1fr); }
	.lbs-registration-grid { grid-template-columns: minmax(0, 1fr); }
	.lbs-section:not(.lbs-section-gray) .lbs-about-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ⇤ 768 — tablet */
@media (max-width: 768px) {
	.lbs-section-intervenants .lbs-intervenants-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* LOT F · P2 — mobile : hauteur réduite proportionnellement (ratio large 4/3). */
	.lbs-section-intervenants .lbs-intervenant-media { aspect-ratio: 4 / 3; }
	.lbs-plan-stage .lbs-floorplan__viewport { min-height: clamp(380px, 55vh, 560px); }
	.lbs-registration-grid { grid-template-columns: 1fr; }
	.lbs-registration-info { margin-bottom: 0; }
	.lbs-practical-venue { margin-bottom: var(--lbs-space-xl); }
}

/* ⇤ 600 — large phone */
@media (max-width: 600px) {
	/* LOT F · P2 — mobile : UNE colonne pour les six cartes intervenants. */
	.lbs-section-intervenants .lbs-intervenants-grid { grid-template-columns: 1fr; }
	.lbs-cta-actions { flex-direction: column; align-items: center; }
	.lbs-cta-actions .lbs-btn { width: 100%; max-width: 320px; }
	.lbs-practical-module { padding: var(--lbs-space-md) var(--lbs-space-lg); gap: var(--lbs-space-md); }
	.lbs-practical-idx { min-width: 2.5rem; font-size: clamp(1.5rem, 5vw, 1.875rem); }
}

/* ⇤ 480 — phone */
@media (max-width: 480px) {
	.lbs-plan-stage .lbs-floorplan__viewport { min-height: 340px; }
	.lbs-floorplan__hint { white-space: normal; max-width: calc(100% - 1.5rem); line-height: 1.3; }
	.lbs-hero-actions { width: 100%; max-width: 320px; margin: 0 auto; }
	.lbs-hero-actions .lbs-btn { width: 100%; }
}

/* ⇤ 360 — small phone */
@media (max-width: 360px) {
	.lbs-intervenants-grid { gap: var(--lbs-space-md); }
	.lbs-practical-module { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   15 · REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.lbs-about-grid .lbs-about-image img { transition: none; transform: none; }
	.lbs-panel-card, .lbs-practical-module,
	.lbs-intervenant-card { transition: none; }
	.lbs-panel-card:hover, .lbs-practical-module:hover,
	.lbs-intervenant-card:hover { transform: none; }
	.lbs-section-intervenants .lbs-intervenant-img { transition: none; }
	.lbs-section-intervenants .lbs-intervenant-card:hover .lbs-intervenant-img { transform: none; }
	.lbs-hero-actions .lbs-btn:hover, .lbs-cta-actions .lbs-btn:hover { transform: none; }
}