/* ============================================================
   PRINTABLE3D — REFONTE COMPLÈTE (CSS-ONLY, NO HTML CHANGES)
   Version: 1.0
   Design goals:
   - Apple-like clarity: big type, generous whitespace, crisp contrast
   - Glass / depth with subtle gradients and shadows
   - Smooth micro-interactions, accessible focus rings
   - Auto Light/Dark via prefers-color-scheme
   - Mobile-first, fluid scales with clamp()
   ============================================================ */

/* -------------------------
   RESET & TOKENS
-------------------------- */
*{box-sizing:border-box}
:root{
  /* Color tokens (dark default) */
  --bg:#0b0c0f;
  --bg-2:#0f1014;
  --panel:#11131a;
  --panel-2:#191c24;
  --text:#f8fafc;
  --muted:#9aa3b2;
  --ring:rgba(255,255,255,.08);
  --border:#1f2430;

  /* Accent */
  --accent:#32d1ff;
  --accent-2:#76f0ff;

  /* Radii & depth */
  --r-xs:10px;
  --r:16px;
  --r-lg:22px;
  --sh-soft: 0 1px 2px rgba(0,0,0,.18);
  --sh: 0 8px 24px rgba(0,0,0,.35);
  --sh-lg: 0 18px 44px rgba(0,0,0,.45);

  /* Type & rhythm */
  --scale: clamp(0.96rem, 0.45vw + 0.85rem, 1.06rem);
  --lh: 1.6;
  --container: 1200px;

  /* Special */
  --glass: color-mix(in srgb, var(--panel) 85%, transparent);
  --glass-2: color-mix(in srgb, var(--panel-2) 88%, transparent);
  --bg-grad:
    radial-gradient(1200px 800px at 20% -10%, rgba(255,255,255,.06), transparent 55%),
    radial-gradient(1200px 800px at 110% 10%, rgba(109, 211, 255, .08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 30%);
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f6f7fb;
    --bg-2:#eef1f6;
    --panel:#ffffff;
    --panel-2:#f6f7fb;
    --text:#0b1220;
    --muted:#51607a;
    --ring:rgba(2,6,23,.08);
    --border:#e7eaf1;
    --accent:#0ea5e9;
    --accent-2:#38bdf8;
    --glass: color-mix(in srgb, var(--panel) 86%, transparent);
    --glass-2: color-mix(in srgb, var(--panel-2) 90%, transparent);
  }
}

html{scroll-behavior:smooth; font-size:16px}
body{
  margin:0;
  color:var(--text);
  font: 16px/var(--lh) ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Ubuntu, Arial;
  font-size: var(--scale);
  background:
    color-mix(in oklab, var(--bg) 94%, transparent),
    var(--bg-grad);
  background-attachment: fixed;
  padding-bottom: env(safe-area-inset-bottom);
}
.container{ max-width: var(--container); margin:0 auto; padding:0 clamp(16px, 3vw, 28px); }
img{ max-width:100%; height:auto; display:block }

/* -------------------------
   HEADER / TOPBAR
-------------------------- */
.topbar{
  position: sticky; top:0; z-index:1100;
  color:#e5e7eb;
  background: linear-gradient(90deg,#0b1220,#101827);
  border-bottom:1px solid var(--border);
  backdrop-filter: saturate(120%) blur(8px);
  -webkit-backdrop-filter: saturate(120%) blur(8px);
}
.topbar .inner{
  max-width: var(--container);
  margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:8px clamp(16px, 3vw, 28px);
}
.topbar .btn{ padding:8px 12px; border-radius:999px }

.header{
  position: sticky; top:0; z-index:1050;
  background: var(--glass);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.header .row{
  min-height: 64px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{ display:flex; gap:12px; align-items:center }
.logo-mini{ width:42px; height:42px; border-radius:12px; object-fit:cover; box-shadow:0 0 0 1px var(--ring) inset, var(--sh-soft); }
.brand .name{ font-weight:900; letter-spacing:.3px }
.brand .tag{ color: var(--muted); font-size:12px; margin-top:-2px }

.nav{ display:flex; gap:14px; align-items:center; overflow-x:auto; white-space:nowrap }
.nav a{
  position:relative;
  color: #d7dce3; text-decoration:none;
  padding:10px 12px; border-radius:12px; font-weight:600;
  transition: color .25s ease, background .25s ease, transform .15s ease;
  outline-offset:4px;
}
.nav a:hover{ color:#0b1220; background:#fff }
.nav a[aria-current="page"]{
  color:#0b1220; background:#fff;
  box-shadow: 0 6px 20px rgba(0,0,0,.10);
}
.nav a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:6px; height:2px; border-radius:2px;
  transform:scaleX(0); transform-origin:left;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: transform .28s ease;
}
.nav a:hover::after, .nav a[aria-current="page"]::after{ transform:scaleX(1) }

/* -------------------------
   TYPOGRAPHY & HEADERS
-------------------------- */
.h1, h1{ font-size: clamp(32px, 5vw, 56px); line-height:1.07; margin: 0 0 10px 0; font-weight: 900; letter-spacing:-.02em }
.h2, h2{ font-size: clamp(22px, 2.6vw, 32px); margin: 0 0 10px 0; font-weight: 800 }
.muted{ color: var(--muted) }

/* -------------------------
   HERO
-------------------------- */
.hero{ padding: clamp(48px, 8vw, 96px) 0; position:relative; }
.hero::before{
  content:""; position:absolute; inset: -20px -20px auto -20px; height:220px; z-index:-1;
  background:
    radial-gradient(240px 120px at 20% 50%, rgba(50,209,255,.18), transparent 50%),
    radial-gradient(240px 120px at 80% 40%, rgba(118,240,255,.14), transparent 55%);
  filter: blur(18px); opacity:.9;
}
.kpis{ display:flex; flex-wrap:wrap; gap:24px; color: #b9c2d0; font-size:14px; margin-top: 16px }

/* -------------------------
   GRID / LAYOUT
-------------------------- */
.grid{ display:grid; gap: clamp(18px, 2vw, 28px) }
.grid-2{ grid-template-columns: 1.2fr .8fr }
.grid-3{ grid-template-columns: repeat(3, minmax(0, 1fr)) }
@media (max-width: 900px){ .grid-2, .grid-3{ grid-template-columns: 1fr } }

.section{ padding: clamp(42px, 6vw, 72px) 0 }

/* -------------------------
   CARDS / PANELS
-------------------------- */
.panel, .card, .product, .gallery-card, .price-card, .feature-card, .quote-card, .cta{
  background: var(--glass-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh);
  transition: transform .18s ease, box-shadow .28s ease, border-color .18s ease;
}
.panel:hover, .card:hover, .product:hover, .gallery-card:hover, .price-card:hover, .feature-card:hover, .quote-card:hover, .cta:hover{
  transform: translateY(-2px);
  box-shadow: var(--sh-lg);
  border-color: color-mix(in srgb, var(--ring), transparent 30%);
}
.panel{ padding: clamp(18px, 2vw, 22px) }
.card{ padding: clamp(12px, 1.4vw, 16px) }
.card img{ border-radius: var(--r); background: var(--bg-2) }

/* Steps in panel */
.panel .steps li{ display:flex; gap:12px; align-items:flex-start }
.panel .steps svg{ flex:0 0 30px }
.panel .steps span{ flex:1 1 auto }

/* -------------------------
   GALLERY
-------------------------- */
.gallery{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.gallery .card{ display:flex; flex-direction:column; gap:12px; }
.gallery .card img{
  width:100%; height:auto; max-height: 480px;
  object-fit: cover; object-position:center;
  border-radius: var(--r);
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
}
.gallery a:hover img{ transform: translateY(-2px) scale(1.01) }
.card .cap{ padding: 8px 10px; color:#cfd6e3; font-size: 14px }

/* -------------------------
   BUTTONS / LINKS
-------------------------- */
.btn, button, .menu-btn, a.btn{
  display:inline-flex; align-items:center; gap:8px;
  background: #fff; color:#0b1220; padding: 10px 16px;
  border-radius: 999px; border: 1px solid #e5e7eb;
  font-weight: 800; text-decoration:none; cursor:pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  transition: transform .16s ease, box-shadow .24s ease, background .24s ease, color .24s ease, border-color .24s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 16px 36px rgba(0,0,0,.12) }
.btn:active{ transform: translateY(0) }
.btn.outline{ background: transparent; color: var(--text); border-color: var(--ring) }
.btn.blue{
  background: linear-gradient(180deg, #2ecbff, #1abdf5);
  color:#05222c; border-color: #14b8e6 !important;
  box-shadow: 0 8px 24px rgba(20,184,230,.35);
}
.btn.blue:hover{ filter: brightness(1.06) }

.btn.sm{ padding: 8px 12px; font-size: 13px; line-height: 1 }

/* WhatsApp & social */
.icon-wa{ width:22px; height:22px; vertical-align:middle; margin-right:6px }
.wa{ display:inline-flex; align-items:center; gap:8px }
.social-row{ display:flex; gap:14px; justify-content:center; align-items:center; margin:16px 0 4px }
.social-btn{ width:48px; height:48px; border-radius:9999px; display:inline-flex; justify-content:center; align-items:center; color:#fff; transition:transform .15s ease, box-shadow .15s ease }
.social-btn:hover{ transform:translateY(-1px) scale(1.04); box-shadow:0 10px 22px rgba(0,0,0,.35) }
.social-btn.wa{ background:#25D366; box-shadow:0 6px 16px rgba(37,211,102,.35) }

/* -------------------------
   PRICING / FEATURES / QUOTES / CTA
-------------------------- */
.prices{ display:grid; gap: clamp(16px, 2vw, 22px) }
@media (min-width: 900px){ .prices{ grid-template-columns: repeat(3, 1fr) } }
.price-card{ padding: 20px }
.price-card h3{ margin:0 0 6px 0 }
.price-card .muted{ font-size:14px }

.features{ display:grid; gap: clamp(14px, 2vw, 16px) }
@media (min-width: 900px){ .features{ grid-template-columns: repeat(4,1fr) } }
.feature-card{ padding:18px; display:flex; gap:12px; align-items:flex-start }
.feature-card svg{ width:28px; height:28px; flex:0 0 28px }
.feature-card h3{ margin:0 0 6px 0; font-size:18px; font-weight:800 }
.feature-card p{ margin:0; color:#cfd6e3; font-size:14px; line-height:1.5 }

.testimonials{ display:grid; gap: clamp(14px, 2vw, 16px) }
@media (min-width: 900px){ .testimonials{ grid-template-columns: repeat(3,1fr) } }
.quote-card{ padding:18px }
.quote-card .stars{ letter-spacing:2px; margin-bottom:8px }
.quote-card .who{ margin-top:10px; color:#cfd6e3; font-size:14px }

.cta{ padding: clamp(28px, 4vw, 40px); text-align:center }
.cta h3{ margin:0 0 8px 0; font-size: clamp(22px, 2.4vw, 28px); font-weight: 900 }
.cta p{ margin:0 0 16px 0; color:#cfd6e3 }

/* -------------------------
   FORMS
-------------------------- */
.input, select, textarea, input, .checks .check input{
  width:100%; background: color-mix(in srgb, var(--panel) 94%, transparent);
  border:1px solid var(--ring); border-radius: 14px; color: var(--text);
  padding: 10px; transition: border-color .2s ease, box-shadow .2s ease;
}
textarea{ resize:vertical }
input:focus, select:focus, textarea:focus{
  outline:none; border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}
.checks{ display:grid; gap:8px; grid-template-columns: repeat(3, minmax(0,1fr)) }
@media (max-width: 720px){ .checks{ grid-template-columns: repeat(2, minmax(0,1fr)) } }

/* Color swatches */
.colors-grid{ display:flex; flex-wrap:wrap; gap:10px }
.color-pill{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid var(--border); border-radius:999px; background: rgba(255,255,255,.03) }
.swatch{ width:14px; height:14px; border-radius:50%; background: var(--c,#888); border:1px solid var(--bd,#222); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05) }
.swatch.glow{ box-shadow:0 0 6px #00e5ff, inset 0 0 0 1px rgba(255,255,255,.04) }

/* -------------------------
   FOOTER
-------------------------- */
.footer{
  border-top:1px solid var(--border);
  background: var(--glass);
  color:#cfd6e3;
  padding: clamp(28px, 4vw, 36px) 0;
}
.footer-legal{ display:flex; gap:12px; flex-wrap:wrap; margin-top:8px }
.footer-link{ color:inherit; opacity:.85; text-decoration:none }
.footer-link:hover{ opacity:1; text-decoration:underline }

/* -------------------------
   DRAWER (mobile nav)
-------------------------- */
.menu-btn{ background: transparent; border: 1px solid var(--ring); color:#e5e7eb; border-radius: 12px; padding: 8px 10px }
@media (max-width: 820px){ .nav{ display:none } .menu-btn{ display:inline-flex } }
.drawer{
  position:fixed; inset:0 0 auto auto; width:min(86vw, 320px); height:100dvh;
  background: var(--bg-2); border-left: 1px solid var(--border);
  transform: translateX(100%); transition: transform .25s ease; z-index: 1200; padding:16px
}
.drawer.open{ transform: translateX(0) }
.drawer a{ display:block; color:#e5e7eb; text-decoration:none; padding: 12px; border-radius: 12px }
.drawer a:hover{ background:#fff; color:#0b1220 }

/* -------------------------
   ACCESSIBILITY
-------------------------- */
:where(a, button, .card, .panel):focus-visible{
  outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 3px; border-radius: 14px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important }
}

/* -------------------------
   MOBILE POLISH
-------------------------- */
:root{ --touch: 44px }
.btn, .input, select, textarea{ min-height: var(--touch) }
.nav a, .menu-btn{ min-height: var(--touch); display:inline-flex; align-items:center }

/* -------------------------
   SMALL EXTRAS (safe)
-------------------------- */
.cta, .highlight{ position:relative; isolation:isolate }
.cta::before, .highlight::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit;
  background: conic-gradient(from 140deg, var(--accent), var(--accent-2), transparent, transparent 60%);
  filter: blur(18px); opacity:.35; z-index:-1; pointer-events:none;
}

/* Keep nav visible background on dark hero images */
.header .row{ background: transparent }

/* === STANDARD PATCH LAYER === */
/* === PATCH: Forms alignment, intro polish, scroll-in effects (non-breaking) === */

/* Radios/checkboxes aligned */
input[type="checkbox"], input[type="radio"]{
  width:18px; height:18px;
  accent-color:#1abdf5;
  margin:0;
  vertical-align:middle;
  transform: translateY(1px);
}

/* Checks grid & items */
.checks{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px 18px; }
@media (max-width: 720px){ .checks{ grid-template-columns:1fr; } }
.check{ display:grid; grid-template-columns:20px 1fr; align-items:center; gap:10px; color:#e7eaf0; }
.check > *{ line-height:1.35; }

/* Two-column form grid on large panels */
.panel form .grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px; }
@media (max-width: 900px){ .panel form .grid{ grid-template-columns:1fr; } }

/* Intro / lede text */
.hero .lede, .hero p:first-of-type{
  color:#c7d0dd;
  font-size: clamp(1.02rem, 1.2vw, 1.18rem);
  line-height: 1.75;
  max-width: 72ch;
  letter-spacing: .1px;
  margin-bottom: 18px;
}

/* Notes / callouts */
.panel .note, .panel .info, .panel .callout{
  background: color-mix(in srgb, var(--panel) 90%, transparent);
  border:1px solid color-mix(in srgb, var(--ring), transparent 30%);
  border-radius:16px;
  padding:16px 18px;
  color:#dfe6f2;
}

/* Subtle scroll-in effects (with fallback) */
@media (prefers-reduced-motion: no-preference){
  :where(.panel, .card, .feature-card, .price-card, .gallery .card, .cta){
    opacity:0; transform: translateY(14px);
    animation: fadeInUp .8s ease both .05s;
  }
  .gallery .card:nth-child(2n){ animation-delay:.12s }
  .gallery .card:nth-child(3n){ animation-delay:.18s }
  @keyframes fadeInUp{ to{ opacity:1; transform: translateY(0) } }

  @supports (animation-timeline: view()){
    :where(.panel, .card, .feature-card, .price-card, .gallery .card, .cta){
      opacity:0; transform: translateY(18px);
      animation: reveal 1s ease both;
      animation-timeline: view();
      animation-range: entry 15% cover 30%;
    }
    @keyframes reveal{ to{ opacity:1; transform: translateY(0) } }
  }
}

/* Inputs contrast a bit higher */
.input, select, textarea{
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  border:1px solid color-mix(in srgb, var(--ring), transparent 20%);
}

/* Sticky side blocks (desktop) */
@media (min-width: 1024px){
  .panel .aside, .panel .side{ position: sticky; top: 96px; align-self: start; }
}

/* === PRO FX LAYER === */
/* === PRO FX: Enhanced scroll visuals, parallax, sticky title compression === */
@media (prefers-reduced-motion: no-preference){

  /* Stronger section halo when entering viewport (scroll-linked if supported) */
  .highlight, .panel, .cta{
    position: relative; isolation:isolate;
  }
  .highlight::before, .panel::before, .cta::before{
    content:""; position:absolute; inset:-1px; border-radius:inherit;
    background: conic-gradient(from 140deg, var(--accent), var(--accent-2), transparent 60%);
    filter: blur(20px); opacity:.28; z-index:-1; pointer-events:none;
    transition: opacity .4s ease;
  }
  @supports (animation-timeline: view()){
    .panel::before, .cta::before{
      animation: haloFade 1s both;
      animation-timeline: view();
      animation-range: entry 5% cover 20%;
    }
    @keyframes haloFade{ from{ opacity:.05 } to{ opacity:.28 } }
  }

  /* Parallax-ish hero background (pure CSS, no HTML changes) */
  .hero{
    background-image:
      radial-gradient(800px 400px at 20% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%),
      radial-gradient(900px 500px at 80% 10%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 65%);
    background-attachment: fixed, fixed;
    background-repeat: no-repeat;
    background-size: cover;
  }

  /* Sticky title compression: the main h1 subtly reduces on scroll */
  @supports (animation-timeline: scroll()){
    .hero .h1, .h1{
      animation: titleCompress linear both;
      animation-timeline: scroll(block);
      animation-range: 0 20vh;
      transform-origin: left top;
    }
    @keyframes titleCompress{
      from{ letter-spacing:-.02em; transform: scale(1); }
      to  { letter-spacing:-.015em; transform: scale(.96); }
    }
  }

  /* Gallery cards get a slight tilt on hover for premium feel */
  .gallery .card:hover img{
    transform: translateY(-3px) scale(1.015) rotate(.15deg);
    box-shadow: 0 18px 44px rgba(0,0,0,.35);
  }
}

/* Optional: elevate header background when scrolling */
@supports (animation-timeline: scroll()){
  .header{
    animation: headShade linear both;
    animation-timeline: scroll(block);
    animation-range: 0 25vh;
  }
  @keyframes headShade{
    from{ background: var(--glass); }
    to  { background: color-mix(in srgb, var(--panel) 92%, transparent); }
  }
}

/* === MOBILE FIX LAYER === */
/* === MOBILE LEGIBILITY FIX (intro/hero) === */
@media (max-width: 768px){
  .hero{
    position: relative;
    background-attachment: scroll !important; /* avoid washed parallax on mobile */
  }
  .hero::after{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.18));
    pointer-events:none; z-index:0;
  }
  .hero .container, .hero > .container *{ position:relative; z-index:1; }
  .hero .h1, .h1{ color: var(--text); }
  .hero .lede, .hero p:first-of-type{
    color: color-mix(in srgb, var(--text) 92%, transparent);
  }
}

/* Light mode specific tuning: use darker text, lighter overlay */
@media (prefers-color-scheme: light){
  @media (max-width: 768px){
    .hero::after{
      background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.78));
    }
    .hero .h1, .h1{ color:#0b1220; }
    .hero .lede, .hero p:first-of-type{ color:#475569; }
  }
}

/* === MOBILE READABILITY LAYER === */
/* === MOBILE READABILITY BOOST (headings, nav, badges, captions) === */
@media (max-width: 768px){
  /* Ensure header/nav text remains readable over any backdrop */
  .header{ background: color-mix(in srgb, var(--panel) 96%, transparent) !important; border-bottom:1px solid var(--border); }
  .brand .name{ color: var(--text); }
  .brand .tag{ color: color-mix(in srgb, var(--text) 70%, transparent); }

  /* Stronger text for section headings and lede */
  h1, .h1, h2, .h2, h3, .h3{ color: var(--text) !important; text-shadow: none; opacity: 1; }
  .hero .lede, .hero p:first-of-type{ color: color-mix(in srgb, var(--text) 90%, transparent) !important; }

  /* Standard paragraph color */
  p, .cap, .card .cap{ color: color-mix(in srgb, var(--text) 80%, transparent); }

  /* Badges/pills with higher contrast on light bg */
  .pill, .badge{
    background: color-mix(in srgb, var(--panel) 96%, transparent);
    border-color: color-mix(in srgb, var(--ring), transparent 15%);
    color: var(--text);
  }

  /* Buttons readable against photos */
  .btn{ box-shadow: 0 10px 26px rgba(0,0,0,.14); }

  /* Gallery captions and helper texts */
  .muted{ color: color-mix(in srgb, var(--text) 70%, transparent) !important; }
}

/* Light mode fine-tuning on mobile */
@media (prefers-color-scheme: light){
  @media (max-width: 768px){
    :root{
      /* Slightly darker text in bright environments */
      --text: #0b1220;
    }
    .muted{ color: #475569 !important; }
    .card .cap{ color:#334155; }
    .pill, .badge{ background:#eef6ff; border-color:#cfe8ff; color:#0b1220; }
  }
}

/* === ULTRA MOBILE LAYER === */
/* === MOBILE ULTRA CONTRAST FIX ===
   Goal: text ALWAYS readable on phones.
   Strategy: solid header/hero backgrounds, no parallax/overlays,
   force strong text colors & weights, larger base size.
*/
@media (max-width: 768px){

  /* 0) Base font bump */
  html{ font-size: 17px; }

  /* 1) Header & topbar rock solid */
  .topbar{ background:#0b1220 !important; color:#e5e7eb !important; }
  .header{ background:#0b1220 !important; border-bottom:1px solid rgba(255,255,255,.08) !important; }
  .brand .name, .nav a{ color:#ffffff !important; text-shadow:none !important; }
  .nav a:hover{ color:#0b1220 !important; background:#ffffff !important; }
  .nav a[aria-current="page"]{ color:#0b1220 !important; background:#ffffff !important; }

  /* 2) HERO: remove all washes, go solid */
  .hero{ background:#0b0c0f !important; }
  .hero::before, .hero::after{ display:none !important; content:none !important; }
  .hero .container, .hero > .container *{ position:relative; z-index:1; }

  /* 3) Strong text colors & weights for hero */
  .hero .h1, .h1{ color:#ffffff !important; font-weight:900 !important; letter-spacing:-.02em !important; text-shadow:none !important; }
  .hero .lede, .hero p:first-of-type{ color:#e5e7eb !important; font-weight:500 !important; }
  .muted{ color:#cbd5e1 !important; }

  /* 4) Section titles & category labels */
  h2, .h2, h3, .h3{ color:#ffffff !important; font-weight:800 !important; text-shadow:none !important; }

  /* 5) Badges/pills */
  .pill, .badge{ background:#111827 !important; color:#ffffff !important; border:1px solid rgba(255,255,255,.12) !important; }

  /* 6) Buttons: ensure readable on photos */
  .btn{ box-shadow:0 10px 28px rgba(0,0,0,.30) !important; border-color:rgba(255,255,255,.16) !important; }
  .btn.outline{ color:#ffffff !important; border-color:rgba(255,255,255,.35) !important; }

  /* 7) Cards & captions */
  .card .cap, .cap, p{ color:#e5e7eb !important; }

  /* 8) Gallery image edges to prevent bleed into text */
  .gallery .card img{ box-shadow: 0 10px 28px rgba(0,0,0,.35) !important; }

  /* 9) Form labels & field text */
  .panel label, .panel .label{ color:#e7eaf0 !important; font-weight:700 !important; }
  .input, select, textarea{ color:#ffffff !important; background:#0f1117 !important; border:1px solid rgba(255,255,255,.12) !important; }
}

/* Light mode override on mobile: keep strong contrast too */
@media (prefers-color-scheme: light){
  @media (max-width: 768px){
    .topbar, .header, .hero{ background:#ffffff !important; }
    .brand .name, .nav a, .hero .h1, .h1{ color:#0b1220 !important; }
    .hero .lede, .hero p:first-of-type, p, .cap{ color:#334155 !important; }
    .pill, .badge{ background:#eef2ff !important; color:#0b1220 !important; border-color:#c7d2fe !important; }
    .btn.outline{ color:#0b1220 !important; border-color:#94a3b8 !important; }
    .input, select, textarea{ color:#0b1220 !important; background:#ffffff !important; border:1px solid #cbd5e1 !important; }
  }
}

/* ==================== ProFX Mobile Fix FINAL ==================== */

/* 1) TOPBAR / HEADER: prevent clipping on mobile */
@media (max-width: 820px){
  :root{
    --safeTop: env(safe-area-inset-top, 0px);
    --topbar-mobile-h: calc(64px + var(--safeTop)); /* reserve space for the "Devis 24–48h" bar */
  }
  .topbar{
    position: sticky; top: 0; z-index: 1100;
    padding-top: calc(12px + var(--safeTop));
    padding-bottom: 12px;
    overflow: visible;
    min-height: calc(var(--topbar-mobile-h) - var(--safeTop));
  }
  .topbar .inner{ display:flex; align-items:center; min-height: 40px; }
  .header{
    position: sticky; top: var(--topbar-mobile-h); z-index: 1050;
    margin-top: 0;
  }
  /* Prevent content from sliding under bars when jumping to anchors */
  .hero{ scroll-margin-top: calc(var(--topbar-mobile-h) + 16px); }
  :where(main, section, article, div)[id]{ scroll-margin-top: calc(var(--topbar-mobile-h) + 16px); }
}

/* 2) MOBILE FORCE DARK for guaranteed contrast, but keep ProFX visuals */
@media (max-width: 820px){
  :root{
    --bg:#0b0c0f; --bg-2:#0f1114; --panel:#11131a; --panel-2:#191c24;
    --text:#f8fafc; --muted:#cbd5e1; --border:#1f2430;
  }
  body, .topbar, .header, .hero, .section, .footer{ background: var(--bg) !important; color: var(--text) !important; }
  .panel, .card, .product, .gallery-card, .price-card, .feature-card, .quote-card{
    background: var(--panel) !important; border-color: rgba(255,255,255,.10) !important; color: var(--text) !important;
  }
  /* Keep hero clean (no wash) */
  .hero::before, .hero::after{ display:none !important; content:none !important; }
  .brand .name, .nav a, h1,.h1,h2,.h2,h3,.h3{ color:#ffffff !important; }
  .hero .lede, .hero p:first-of-type, p, .cap, .card .cap{ color:#e7edf5 !important; }
  .pill, .badge{ background:#1f2430 !important; color:#ffffff !important; border:1px solid rgba(255,255,255,.14) !important; }
  .input, select, textarea{ background:#0f1117 !important; color:#ffffff !important; border:1px solid rgba(255,255,255,.16) !important; }
  .btn{ box-shadow: 0 12px 30px rgba(0,0,0,.35) !important; }
  /* Brighten lower sections slightly so infos pratiques aren't too dark */
  .section, .footer{ background:#121720 !important; }
  .panel, .card{ background:#171e29 !important; border-color: rgba(255,255,255,.12) !important; }
}

/* 3) CSS-ONLY SCROLL REVEAL with fallback (as in early ProFX version) */
:where(.panel, .card, .gallery .card, .album .item, .feature-card, .price-card, .quote-card, .product, .cta){
  opacity: 0;
  transform: translateY(18px);
  animation: _fallbackFade .6s ease both .05s;
}
:where(.gallery .card):nth-child(2n){ animation-delay:.12s }
:where(.gallery .card):nth-child(3n){ animation-delay:.18s }
@keyframes _fallbackFade{ to{ opacity:1; transform: none; } }
@supports (animation-timeline: view()){
  :where(.panel, .card, .gallery .card, .album .item, .feature-card, .price-card, .quote-card, .product, .cta){
    opacity: 0; transform: translateY(24px);
    animation: _reveal 1s cubic-bezier(.2,.8,.2,1) both;
    animation-timeline: view();
    animation-range: entry 15% cover 30%;
  }
  @keyframes _reveal{ to{ opacity:1; transform: none; } }
}
@media (prefers-reduced-motion: reduce){
  :where(.panel, .card, .gallery .card, .album .item, .feature-card, .price-card, .quote-card, .product, .cta){
    opacity:1; transform:none; animation:none;
  }
}

/* 4) Ensure header/topbar sit above any fades/overlays */
@media (max-width: 820px){
  .topbar{ z-index:1101; }
  .header{ z-index:1100; }
}

/* ===================== ProFX MobileFix ULTRA ===================== */

/* 0) Email ↔ Réseaux spacing – robust v2 */
@media (max-width: 1200px){
  /* Ensure spacing AFTER the social row and BEFORE/AFTER email block */
  .social-row{ margin-bottom: 0 !important; }
  .social-row + *{ margin-top: 18px !important; }
  /* If an element contains a mailto link, give it breathing room */
  @supports selector(.panel:has(a[href^="mailto:"])){
    .panel:has(a[href^="mailto:"]), .card:has(a[href^="mailto:"]){
      margin-top: 18px !important;
      margin-bottom: 18px !important;
    }
    .panel:has(a[href^="mailto:"]) + *, .card:has(a[href^="mailto:"]) + *{
      margin-top: 18px !important;
    }
  }
  /* Generic fallback inside the right-side info stack */
  .panel .info, .panel .notice, .panel .box{ display:block }
  .panel > * + *{ margin-top: 14px; } /* gentle base rhythm */
}

/* 1) Stronger scroll reveal (Apple-like) with safe fallback */
:where(.panel, .card, .gallery .card, .album .item, .feature-card, .price-card, .quote-card, .product, .cta){
  opacity: 0;
  transform: translateY(26px);
  animation: _rvFallback 0.9s cubic-bezier(.22,.72,.12,1) both .04s;
}
:where(.gallery .card):nth-child(2n){ animation-delay:.12s }
:where(.gallery .card):nth-child(3n){ animation-delay:.18s }
@keyframes _rvFallback{ to{ opacity:1; transform: none; } }

@supports (animation-timeline: view()){
  :where(.panel, .card, .gallery .card, .album .item, .feature-card, .price-card, .quote-card, .product, .cta){
    opacity: 0; transform: translateY(32px);
    animation: _rvIn 1.1s cubic-bezier(.2,.8,.2,1) both;
    animation-timeline: view();
    animation-range: entry 12% cover 36%;
  }
  @keyframes _rvIn{ to{ opacity:1; transform: none; } }
}

/* 2) Vertical scroll snap (mobile only) – auto-centre les blocs suivants */
@media (max-width: 820px){
  /* Apply snap to the main scroller */
  html, body{ scroll-snap-type: y proximity; }
  /* Make sure sticky bars don't hide the snapped content */
  :root{ --safeTop: env(safe-area-inset-top, 0px); }
  body{ scroll-padding-top: calc(72px + var(--safeTop)); }

  /* Snap targets: sections & big cards/panels */
  :where(main > section, .section, .panel, .card, .gallery .card, .album .item, .product, .cta){
    scroll-snap-align: start;
  }
}

/* 3) Keep header/topbar above any overlays/fades */
@media (max-width: 820px){
  .topbar{ z-index: 1101; }
  .header{ z-index: 1100; }
}

/* ===== V7 anchor + anti-bounce mobile patch ===== */
:root { --header-offset: 88px; }
@media (max-width: 768px){ :root { --header-offset: 104px; } }

/* Let the browser do instant jumps (smooth can cause double-jump on iOS) */
html { scroll-behavior: auto !important; }

/* Ensure anchor targets sit below the sticky header */
[id] { scroll-margin-top: var(--header-offset); }
/* Fallback offset for browsers that ignore scroll-margin with hashes */
:target::before {
  content: "";
  display: block;
  height: var(--header-offset);
  margin-top: calc(-1 * var(--header-offset));
}

/* Kill scroll-snap on mobile to avoid "remonte au hasard" */
@media (max-width: 768px){
  html, body, main, .page, .container, .sections, .snap, [class*="snap"] {
    scroll-snap-type: none !important;
    -webkit-scroll-snap-type: none !important;
  }
}
/* ================================================ */


/* Seasonal theme import (applies site-wide) */
@import url('assets/css/halloween.css');


/* === Lampes portrait 9/16 (aligné sur Décoration) === */
#lampes .gallery .card img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset;
}