test: Add landscape layout and button opacity test suites

Added comprehensive test coverage for mobile fixes:

1. test 50: Landscape Layout Diagnostic (50-landscape-layout-check.mjs)
   Purpose: Verify single-column layout in landscape orientation
   Tests:
   - Grid template columns detection
   - Sidebar and main content widths
   - 2-column vs 1-column layout verification
   Viewport: 844x390 (iPhone 14 Pro landscape)
   Expected: Single column (1fr) grid layout

2. test 51: Mobile Button Opacity Test (51-mobile-button-opacity-test.mjs)
   Purpose: Verify all mobile buttons have full opacity (no transparency)
   Tests:
   - Background color alpha channel (should be 1.0)
   - CSS opacity property (should be 1.0)
   - Checks all 6 buttons: download, print, shortcuts, info, back-to-top, theme
   Viewport: 375x667 (iPhone SE portrait)
   Expected: All buttons at full opacity with blur bar backdrop

Test Organization:
- Numbered sequence: 48-52 (continuing from existing tests)
- Test 48: Mobile landscape and blur bar
- Test 49: Mobile light theme default
- Test 50: Landscape layout verification (NEW)
- Test 51: Button opacity verification (NEW)
- Test 52: Device detection and shortcuts visibility

All tests are executable with proper shebang (#!/usr/bin/env node)
Run with: node tests/mjs/[test-number]-[test-name].mjs

tests/mjs/50-landscape-layout-check.mjs

@@ -0,0 +1,73 @@
+#!/usr/bin/env node
+
+import { chromium } from 'playwright';
+
+const LANDSCAPE = { width: 844, height: 390 }; // iPhone 14 Pro landscape
+
+(async () => {
+    const browser = await chromium.launch({ headless: true });
+    const context = await browser.newContext({ viewport: LANDSCAPE });
+    const page = await context.newPage();
+
+    console.log('📱 Checking iPhone Landscape Layout\n');
+
+    await page.goto('http://localhost:1999/?lang=en&view=extended');
+    await page.waitForLoadState('networkidle');
+
+    // Check key layout elements
+    const pageContent = await page.locator('.page-content').first();
+    const sidebar = await page.locator('.cv-sidebar').first();
+    const cvMain = await page.locator('.cv-main').first();
+
+    const pageContentStyles = await pageContent.evaluate(el => {
+        const computed = window.getComputedStyle(el);
+        return {
+            display: computed.display,
+            gridTemplateColumns: computed.gridTemplateColumns
+        };
+    });
+
+    const sidebarStyles = await sidebar.evaluate(el => {
+        const computed = window.getComputedStyle(el);
+        return {
+            display: computed.display,
+            width: computed.width
+        };
+    });
+
+    const mainStyles = await cvMain.evaluate(el => {
+        const computed = window.getComputedStyle(el);
+        return {
+            display: computed.display,
+            width: computed.width
+        };
+    });
+
+    console.log('📊 Layout Analysis:\n');
+    console.log('Page Content:');
+    console.log(`  • Display: ${pageContentStyles.display}`);
+    console.log(`  • Grid Template Columns: ${pageContentStyles.gridTemplateColumns}`);
+    console.log(`  • Expected: Should be single column (1fr) on mobile\n`);
+
+    console.log('Sidebar:');
+    console.log(`  • Display: ${sidebarStyles.display}`);
+    console.log(`  • Width: ${sidebarStyles.width}\n`);
+
+    console.log('Main Content:');
+    console.log(`  • Display: ${mainStyles.display}`);
+    console.log(`  • Width: ${mainStyles.width}\n`);
+
+    // Check if it's a 2-column layout (wrong) or 1-column (correct)
+    const isTwoColumn = pageContentStyles.gridTemplateColumns &&
+                        pageContentStyles.gridTemplateColumns.includes('minmax');
+
+    console.log(`Layout Type: ${isTwoColumn ? '❌ TWO COLUMNS (WRONG)' : '✅ SINGLE COLUMN (CORRECT)'}\n`);
+
+    await page.screenshot({
+        path: 'tests/screenshots/landscape-layout-detailed.png',
+        fullPage: true
+    });
+    console.log('📸 Screenshot: tests/screenshots/landscape-layout-detailed.png\n');
+
+    await browser.close();
+})();

tests/mjs/51-mobile-button-opacity-test.mjs

@@ -0,0 +1,64 @@
+#!/usr/bin/env node
+
+import { chromium } from 'playwright';
+
+const MOBILE_VIEWPORT = { width: 375, height: 667 };
+
+(async () => {
+    const browser = await chromium.launch({ headless: true });
+    const context = await browser.newContext({
+        viewport: MOBILE_VIEWPORT,
+        ignoreHTTPSErrors: true
+    });
+    const page = await context.newPage();
+
+    console.log('🧪 Testing Mobile Button Opacity (Should be Full - No Transparency)\n');
+
+    await page.goto('http://localhost:1999/?lang=en&view=extended');
+    await page.waitForLoadState('networkidle');
+
+    // Check button opacities and backgrounds
+    const buttons = {
+        download: await page.locator('.download-btn'),
+        print: await page.locator('.print-friendly-btn'),
+        shortcuts: await page.locator('.shortcuts-btn'),
+        info: await page.locator('.info-button'),
+        backToTop: await page.locator('.back-to-top'),
+        theme: await page.locator('.color-theme-switcher')
+    };
+
+    console.log('📊 Button Opacity Check:\n');
+
+    for (const [name, button] of Object.entries(buttons)) {
+        const styles = await button.evaluate(el => {
+            const computed = window.getComputedStyle(el);
+            const bg = computed.backgroundColor;
+
+            // Extract rgba values
+            const match = bg.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
+            const alpha = match && match[4] ? parseFloat(match[4]) : 1.0;
+
+            return {
+                background: bg,
+                opacity: computed.opacity,
+                alpha: alpha
+            };
+        });
+
+        const isFullOpacity = styles.alpha === 1.0 && parseFloat(styles.opacity) === 1.0;
+
+        console.log(`${name}:`);
+        console.log(`  • Background: ${styles.background}`);
+        console.log(`  • Opacity: ${styles.opacity}`);
+        console.log(`  • Alpha: ${styles.alpha}`);
+        console.log(`  • Full opacity: ${isFullOpacity ? '✅' : '❌'}\n`);
+    }
+
+    await page.screenshot({
+        path: 'tests/screenshots/mobile-buttons-full-opacity.png',
+        fullPage: true
+    });
+    console.log('📸 Screenshot: tests/screenshots/mobile-buttons-full-opacity.png\n');
+
+    await browser.close();
+})();