@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@1,400;1,600&display=swap');

:root {
  --gold: #C4922A;
  --gold-light: #E0AE50;
  --dark: #0A0C0E;
  --dark-2: #111418;
  --dark-3: #181D22;
  --border: rgba(196,146,42,0.2);
  --text: #C8C8BC;
  --white: #F5F2ED;
  --cta: https://lp.tapismarinbateau.ca;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Montserrat',sans-serif; background:var(--dark); color:var(--text); overflow-x:hidden; }

/* NAV */
nav { position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:14px 60px; background:rgba(10,12,14,0.96); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); }
.nav-logo img { height:44px; width:auto; display:block; }
.nav-links { display:flex; gap:32px; list-style:none; align-items:center; }
.nav-links a { color:var(--text); text-decoration:none; font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; transition:color 0.2s; }
.nav-links a:hover { color:var(--gold); }
.nav-dropdown { position:relative; }
.nav-dropdown-menu { display:none; position:absolute; top:100%; left:0; background:var(--dark-2); border:1px solid var(--border); min-width:240px; padding:8px 0; flex-direction:column; z-index:200; }
.nav-dropdown:hover .nav-dropdown-menu { display:flex; }
.nav-dropdown-menu a { padding:10px 20px; font-size:11px; white-space:nowrap; display:block; }
.nav-cta { background:var(--gold) !important; color:#000 !important; padding:10px 24px; font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; text-decoration:none; transition:background 0.2s; }
.nav-cta:hover { background:var(--gold-light) !important; }

/* HERO */
.hero { min-height:100vh; display:flex; align-items:center; position:relative; overflow:hidden; }
.hero-bg-img { position:absolute; inset:0; background-size:cover; background-position:center; background-repeat:no-repeat; }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(135deg, rgba(6,10,14,0.88) 0%, rgba(10,18,28,0.75) 50%, rgba(10,12,14,0.82) 100%); }
.hero-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(196,146,42,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(196,146,42,0.04) 1px,transparent 1px); background-size:60px 60px; }
.hero-content { position:relative; z-index:2; max-width:1200px; margin:0 auto; padding:140px 60px 80px; display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; width:100%; }
.hero-eyebrow { display:inline-flex; align-items:center; gap:10px; font-size:11px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--gold); margin-bottom:24px; }
.hero-eyebrow::before { content:''; width:40px; height:1px; background:var(--gold); display:inline-block; }
.hero h1 { font-family:'Bebas Neue',sans-serif; font-size:clamp(52px,5vw,80px); line-height:0.95; color:var(--white); margin-bottom:12px; letter-spacing:2px; }
.hero h1 em { font-family:'Playfair Display',serif; font-style:italic; color:var(--gold); }
.hero-sub { font-size:16px; color:var(--text); line-height:1.7; margin:24px 0 40px; max-width:480px; }
.hero-btns { display:flex; gap:16px; flex-wrap:wrap; }
.hero-card { background:rgba(10,12,14,0.7); border:1px solid var(--border); padding:24px 28px; border-left:3px solid var(--gold); backdrop-filter:blur(8px); margin-bottom:16px; }
.hero-card:last-child { margin-bottom:0; }
.hero-card-icon { font-size:24px; margin-bottom:8px; }
.hero-card h3 { font-size:13px; font-weight:700; color:var(--white); letter-spacing:1px; text-transform:uppercase; margin-bottom:5px; }
.hero-card p { font-size:13px; line-height:1.6; }

/* PAGE HERO (sous-pages) */
.page-hero-section { position:relative; padding:140px 0 80px; overflow:hidden; }
.page-hero-bg { position:absolute; inset:0; background-size:cover; background-position:center; }
.page-hero-overlay { position:absolute; inset:0; background:linear-gradient(135deg,rgba(6,10,14,0.9) 0%,rgba(10,18,28,0.8) 100%); }
.page-hero { position:relative; z-index:2; max-width:1200px; margin:0 auto; padding:0 60px; }
.page-eyebrow { font-size:11px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--gold); margin-bottom:16px; }
.page-hero h1 { font-family:'Bebas Neue',sans-serif; font-size:clamp(44px,5vw,72px); color:var(--white); line-height:1; letter-spacing:2px; margin-bottom:20px; }
.page-hero h1 em { font-family:'Playfair Display',serif; font-style:italic; color:var(--gold); }
.page-hero p { font-size:16px; line-height:1.7; max-width:640px; margin-bottom:32px; color:var(--text); }

/* BUTTONS */
.btn-primary { background:var(--gold); color:#000; padding:15px 36px; font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; text-decoration:none; display:inline-block; transition:all 0.2s; }
.btn-primary:hover { background:var(--gold-light); transform:translateY(-2px); }
.btn-secondary { border:1px solid var(--border); color:var(--text); padding:15px 36px; font-size:12px; font-weight:600; letter-spacing:2px; text-transform:uppercase; text-decoration:none; display:inline-block; transition:all 0.2s; }
.btn-secondary:hover { border-color:var(--gold); color:var(--gold); }

/* SECTION */
.section { max-width:1200px; margin:0 auto; padding:80px 60px; }
.section-eyebrow { font-size:11px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--gold); margin-bottom:16px; }
.section-title { font-family:'Bebas Neue',sans-serif; font-size:clamp(32px,3vw,48px); color:var(--white); line-height:1.05; letter-spacing:1px; margin-bottom:20px; }
.section-title em { font-family:'Playfair Display',serif; font-style:italic; color:var(--gold); }
.section-desc { font-size:15px; line-height:1.7; max-width:640px; margin-bottom:48px; }
.bg-dark2 { background:var(--dark-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }

/* PRODUCT TYPES NAV */
.product-types { display:flex; gap:12px; flex-wrap:wrap; padding:20px 60px; background:var(--dark-2); border-bottom:1px solid var(--border); align-items:center; }
.type-link { font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; text-decoration:none; color:var(--text); padding:8px 18px; border:1px solid var(--border); transition:all 0.2s; }
.type-link:hover, .type-link.active { background:var(--gold); color:#000; border-color:var(--gold); }

/* COLORS GRID avec images */
.colors-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:24px; margin-top:48px; }
.color-card { background:var(--dark-2); border:1px solid var(--border); overflow:hidden; transition:border-color 0.3s, transform 0.3s; }
.color-card:hover { border-color:rgba(196,146,42,0.5); transform:translateY(-4px); }
.color-card-images { display:flex; gap:4px; padding:16px 16px 0; background:var(--dark-3); }
.color-img { width:calc(50% - 2px); aspect-ratio:1; object-fit:cover; cursor:pointer; transition:opacity 0.2s; border:1px solid transparent; }
.color-img:hover { opacity:0.85; border-color:var(--gold); }
.color-img-single { width:100%; aspect-ratio:1; object-fit:cover; cursor:pointer; transition:opacity 0.2s; }
.color-img-single:hover { opacity:0.85; }
.color-img-hint { font-size:10px; color:rgba(200,200,188,0.4); padding:6px 16px; letter-spacing:0.5px; background:var(--dark-3); }
.color-num { background:var(--gold); color:#000; font-family:'Bebas Neue',sans-serif; font-size:16px; padding:5px 14px; display:inline-block; margin:16px 16px 0; letter-spacing:2px; }
.color-card h3 { font-family:'Bebas Neue',sans-serif; font-size:24px; color:var(--white); letter-spacing:1px; padding:10px 16px 6px; }
.color-card p { font-size:13px; padding:0 16px 16px; line-height:1.6; }
.color-card .color-cta { display:block; text-align:center; padding:13px; background:rgba(196,146,42,0.08); border-top:1px solid var(--border); font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--gold); text-decoration:none; transition:background 0.2s; }
.color-card .color-cta:hover { background:rgba(196,146,42,0.2); }

/* LIGHTBOX */
.lightbox { display:none; position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,0.92); align-items:center; justify-content:center; cursor:pointer; }
.lightbox.open { display:flex; }
.lightbox img { max-width:90vw; max-height:90vh; object-fit:contain; border:1px solid var(--border); }
.lightbox-close { position:absolute; top:24px; right:32px; font-size:32px; color:var(--white); cursor:pointer; line-height:1; font-weight:300; }

/* STATS */
.stats-bar { background:var(--dark-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.stats-inner { max-width:1200px; margin:0 auto; padding:50px 60px; display:grid; grid-template-columns:repeat(4,1fr); }
.stat-item { text-align:center; padding:10px; border-right:1px solid var(--border); }
.stat-item:last-child { border-right:none; }
.stat-num { font-family:'Bebas Neue',sans-serif; font-size:48px; color:var(--gold); line-height:1; letter-spacing:2px; }
.stat-label { font-size:11px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--text); margin-top:8px; }

/* FEATURES */
.features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; margin-top:48px; }
.feature-card { background:var(--dark-2); padding:40px 32px; position:relative; overflow:hidden; transition:background 0.3s; }
.feature-card:hover { background:var(--dark-3); }
.feature-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--gold),transparent); opacity:0; transition:opacity 0.3s; }
.feature-card:hover::after { opacity:1; }
.feature-icon { width:48px; height:48px; background:rgba(196,146,42,0.1); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:20px; }
.feature-card h3 { font-size:14px; font-weight:700; color:var(--white); letter-spacing:0.5px; margin-bottom:10px; }
.feature-card p { font-size:14px; line-height:1.7; }

/* SPECS */
.specs-table { width:100%; border-collapse:collapse; margin-top:32px; }
.specs-table th { background:rgba(196,146,42,0.1); color:var(--gold); font-size:11px; letter-spacing:2px; text-transform:uppercase; padding:14px 20px; text-align:left; border-bottom:1px solid var(--border); }
.specs-table td { padding:14px 20px; font-size:14px; border-bottom:1px solid rgba(255,255,255,0.04); }

/* CTA BANNER */
.cta-banner { background:linear-gradient(135deg,rgba(196,146,42,0.12),rgba(196,146,42,0.04)); border:1px solid var(--border); padding:60px; text-align:center; margin-top:60px; }
.cta-banner h2 { font-family:'Bebas Neue',sans-serif; font-size:42px; color:var(--white); letter-spacing:2px; margin-bottom:16px; }
.cta-banner p { font-size:15px; margin-bottom:32px; }

/* BREADCRUMB */
.breadcrumb { max-width:1200px; margin:0 auto; padding:20px 60px 0; display:flex; gap:8px; align-items:center; font-size:12px; position:relative; z-index:3; }
.breadcrumb a { color:var(--text); text-decoration:none; transition:color 0.2s; }
.breadcrumb a:hover { color:var(--gold); }
.breadcrumb span.sep { color:rgba(200,200,188,0.3); }
.breadcrumb .current { color:var(--gold); }

/* GALLERY HOME */
.gallery-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; margin-top:40px; }
.gallery-grid img { width:100%; aspect-ratio:1; object-fit:cover; cursor:pointer; transition:opacity 0.2s, transform 0.2s; }
.gallery-grid img:hover { opacity:0.85; transform:scale(1.02); }

/* FOOTER */
footer { background:#060708; border-top:1px solid var(--border); padding:60px; }
.footer-inner { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr; gap:60px; margin-bottom:40px; }
.footer-logo img { height:50px; width:auto; margin-bottom:16px; }
.footer-brand p { font-size:13px; line-height:1.7; max-width:280px; }
.footer-col h4 { font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--gold); margin-bottom:18px; }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer-col a { font-size:13px; color:var(--text); text-decoration:none; transition:color 0.2s; }
.footer-col a:hover { color:var(--gold); }
.footer-bottom { max-width:1200px; margin:0 auto; padding-top:24px; border-top:1px solid rgba(255,255,255,0.05); display:flex; justify-content:space-between; align-items:center; }
.footer-bottom p { font-size:12px; color:rgba(200,200,188,0.35); }

/* MOBILE */
@media(max-width:900px){
  nav { padding:12px 20px; }
  .nav-links { display:none; }
  .hero-content { grid-template-columns:1fr; padding:100px 24px 60px; gap:32px; }
  .hero-right { display:none; }
  .page-hero { padding:0 24px; }
  .page-hero-section { padding:100px 0 60px; }
  .section { padding:60px 24px; }
  .product-types { padding:16px 24px; }
  .features-grid { grid-template-columns:1fr; }
  .stats-inner { grid-template-columns:repeat(2,1fr); padding:32px 24px; }
  .stat-item { border-right:none; border-bottom:1px solid var(--border); }
  .stat-item:nth-child(odd) { border-right:1px solid var(--border); }
  .colors-grid { grid-template-columns:1fr; }
  .gallery-grid { grid-template-columns:repeat(2,1fr); }
  .footer-inner { grid-template-columns:1fr; gap:32px; }
  .footer-bottom { flex-direction:column; gap:8px; }
  footer { padding:40px 24px; }
  .cta-banner { padding:40px 24px; }
  .breadcrumb { padding:16px 24px 0; }
}