/* ═══════════════════════════════════════════════════════════════
   Studio By Jef — Liquid Glass Design System
   Inspiré d'iOS 26 — backdrop-filter, specular highlights, orbs
═══════════════════════════════════════════════════════════════ */

/* ── RESET & TOKENS ───────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root {
  /* Brand */
  --gold:         #C9A84C;
  --gold-light:   #E4C97E;
  --gold-dim:     rgba(201,168,76,.14);
  --gold-glow:    rgba(201,168,76,.22);

  /* Background layers */
  --bg:           #060606;
  --bg-2:         #0C0C0C;
  --bg-surface:   #101010;

  /* Liquid Glass */
  --glass-1:      rgba(255,255,255,.055);
  --glass-2:      rgba(255,255,255,.08);
  --glass-3:      rgba(255,255,255,.11);
  --glass-hover:  rgba(255,255,255,.13);
  --glass-gold:   rgba(201,168,76,.1);
  --glass-gold-h: rgba(201,168,76,.16);
  --blur:         blur(40px) saturate(160%);
  --blur-heavy:   blur(60px) saturate(180%);
  --blur-light:   blur(20px) saturate(140%);

  /* Borders */
  --border:       rgba(255,255,255,.09);
  --border-gold:  rgba(201,168,76,.25);

  /* Specular (top highlight — signature iOS glass) */
  --spec:         inset 0 1px 0 rgba(255,255,255,.18);
  --spec-strong:  inset 0 1px 0 rgba(255,255,255,.28);
  --spec-gold:    inset 0 1px 0 rgba(201,168,76,.3);

  /* Text */
  --text:         #F2EFE9;
  --muted:        rgba(242,239,233,.5);
  --muted-2:      rgba(242,239,233,.28);

  /* Typography */
  --serif:        'Cormorant', Georgia, serif;
  --sans:         'Montserrat', 'Helvetica Neue', sans-serif;

  /* Motion */
  --ease:         cubic-bezier(.4,0,.2,1);
  --ease-spring:  cubic-bezier(.34,1.4,.64,1);
  --t-fast:       180ms;
  --t-mid:        300ms;
  --t-slow:       500ms;

  /* Shadows */
  --shadow:       0 8px 32px rgba(0,0,0,.5), var(--spec);
  --shadow-hover: 0 20px 56px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.22);
  --shadow-gold:  0 4px 24px rgba(201,168,76,.28);
  --shadow-gold-h:0 8px 40px rgba(201,168,76,.4);
}

html { scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body {
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img { display:block; max-width:100%; height:auto }
a { color:inherit; text-decoration:none }
button { cursor:pointer; font-family:var(--sans) }
::selection { background:var(--gold); color:#000 }
::-webkit-scrollbar { width:2px }
::-webkit-scrollbar-thumb { background:var(--gold); border-radius:2px }

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important }
}

/* ── BACKGROUND ORBS (substrate under glass) ─────────────── */
.orb {
  position:fixed; border-radius:50%;
  pointer-events:none; z-index:0;
  will-change:transform;
}
.orb-1 {
  width:700px; height:700px;
  background:radial-gradient(circle, rgba(201,168,76,.13) 0%, transparent 65%);
  top:-200px; right:-150px;
  filter:blur(80px);
}
.orb-2 {
  width:550px; height:550px;
  background:radial-gradient(circle, rgba(140,80,20,.09) 0%, transparent 65%);
  bottom:-150px; left:-100px;
  filter:blur(100px);
}
.orb-3 {
  width:400px; height:400px;
  background:radial-gradient(circle, rgba(201,168,76,.06) 0%, transparent 65%);
  top:40%; left:50%; transform:translate(-50%,-50%);
  filter:blur(120px);
}
body > * { position:relative; z-index:1 }

/* ── NAVIGATION ───────────────────────────────────────────── */
.nav {
  position:fixed;
  top:1.1rem; left:1.1rem; right:1.1rem;
  z-index:100;
  padding:.85rem 1.6rem;
  display:flex; align-items:center; justify-content:space-between;
  background:var(--glass-3);
  backdrop-filter:var(--blur-heavy);
  -webkit-backdrop-filter:var(--blur-heavy);
  border-radius:60px;
  border:1px solid var(--border);
  box-shadow:var(--spec), 0 8px 32px rgba(0,0,0,.4);
  transition:background var(--t-mid) var(--ease),
             box-shadow var(--t-mid) var(--ease);
}
.nav.scrolled {
  background:rgba(12,12,12,.75);
  box-shadow:var(--spec-strong), 0 12px 40px rgba(0,0,0,.55),
             0 0 0 1px rgba(201,168,76,.08);
}
.nav-logo {
  font-family:var(--serif); font-size:1.25rem; font-style:italic;
  letter-spacing:.03em; line-height:1;
}
.nav-logo span { color:var(--gold) }

.nav-links { display:flex; align-items:center; gap:1.5rem }
.nav-links a {
  font-size:.62rem; font-weight:500; letter-spacing:.15em; text-transform:uppercase;
  color:var(--muted); transition:color var(--t-fast);
}
.nav-links a:hover, .nav-links a.active { color:var(--text) }
.nav-links a.active { color:var(--gold) }

.nav-app-link { color:var(--gold) !important; display:flex !important; align-items:center; gap:.35rem }
.nav-app-dot {
  display:inline-flex; align-items:center; justify-content:center;
  width:.95rem; height:.95rem; background:var(--gold); border-radius:50%; flex-shrink:0;
}

.nav-cta {
  font-size:.6rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  background:var(--gold); color:#000;
  padding:.52rem 1.3rem; border-radius:60px;
  box-shadow:var(--shadow-gold);
  transition:background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.nav-cta:hover { background:var(--gold-light); transform:translateY(-1px); box-shadow:var(--shadow-gold-h) }

.nav-burger { display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px }
.nav-burger span {
  display:block; width:21px; height:1.5px; background:var(--text);
  transition:transform var(--t-mid), opacity var(--t-mid);
  transform-origin:center;
}
.nav-burger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg) }
.nav-burger.open span:nth-child(2) { opacity:0 }
.nav-burger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg) }

/* Mobile Drawer */
.drawer {
  position:fixed; inset:0; z-index:99;
  background:rgba(6,6,6,.85);
  backdrop-filter:var(--blur-heavy);
  -webkit-backdrop-filter:var(--blur-heavy);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem;
  opacity:0; pointer-events:none;
  transition:opacity var(--t-mid) var(--ease);
}
.drawer.open { opacity:1; pointer-events:all }
.drawer a {
  font-family:var(--serif); font-size:2.3rem; font-style:italic;
  color:rgba(242,239,233,.6); padding:.4rem 2rem;
  transition:color var(--t-fast);
}
.drawer a:hover { color:var(--gold) }
.drawer .d-cta {
  margin-top:1.5rem;
  background:var(--gold); color:#000;
  font-family:var(--sans); font-size:.7rem; font-style:normal;
  font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  padding:.85rem 2.5rem; border-radius:60px; box-shadow:var(--shadow-gold);
}
.drawer-close {
  position:absolute; top:1.5rem; right:1.5rem;
  background:var(--glass-2); border:1px solid var(--border);
  color:var(--text); width:2.4rem; height:2.4rem; border-radius:50%;
  font-size:1rem; display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:var(--spec);
}

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn-primary {
  display:inline-flex; align-items:center; gap:.6rem;
  background:var(--gold); color:#000;
  font-size:.66rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  padding:.9rem 2rem; border-radius:60px; border:none; cursor:pointer;
  box-shadow:var(--shadow-gold);
  transition:background var(--t-fast), transform var(--t-mid) var(--ease-spring), box-shadow var(--t-fast);
}
.btn-primary:hover { background:var(--gold-light); transform:translateY(-2px) scale(1.01); box-shadow:var(--shadow-gold-h) }
.btn-primary svg { transition:transform var(--t-fast) }
.btn-primary:hover svg { transform:translateX(3px) }

.btn-ghost {
  display:inline-flex; align-items:center; gap:.6rem;
  background:var(--glass-2); color:var(--text);
  font-size:.66rem; font-weight:400; letter-spacing:.13em; text-transform:uppercase;
  padding:.9rem 2rem; border-radius:60px;
  border:1px solid var(--border);
  backdrop-filter:var(--blur-light);
  -webkit-backdrop-filter:var(--blur-light);
  box-shadow:var(--spec);
  transition:background var(--t-fast), border-color var(--t-fast), transform var(--t-mid) var(--ease-spring);
}
.btn-ghost:hover { background:var(--glass-hover); border-color:var(--border-gold); transform:translateY(-2px) }

/* ── SECTION COMMONS ──────────────────────────────────────── */
section { padding:7rem 2rem }
.container { max-width:1200px; margin:0 auto }

.section-tag {
  display:inline-flex; align-items:center; gap:.65rem;
  font-size:.58rem; font-weight:600; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1.4rem;
}
.section-tag::before { content:''; width:1.75rem; height:1px; background:var(--gold) }

.section-title {
  font-family:var(--serif);
  font-size:clamp(2.4rem, 5vw, 4.2rem);
  font-weight:300; line-height:1.05; letter-spacing:-.02em; margin-bottom:1.4rem;
}
.section-title em { font-style:italic; color:var(--gold) }

.section-body { font-size:.88rem; color:var(--muted); line-height:1.9; max-width:520px }

/* ── GLASS CARDS ──────────────────────────────────────────── */
.glass-card {
  background:var(--glass-2);
  backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);
  border-radius:20px;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  transition:
    background var(--t-mid) var(--ease),
    transform var(--t-mid) var(--ease-spring),
    box-shadow var(--t-mid) var(--ease);
}
.glass-card:hover {
  background:var(--glass-hover);
  transform:translateY(-5px) scale(1.005);
  box-shadow:var(--shadow-hover);
}
.glass-card-gold {
  background:var(--glass-gold);
  border-color:var(--border-gold);
  box-shadow:var(--spec-gold), 0 8px 32px rgba(0,0,0,.4), 0 0 0 1px rgba(201,168,76,.08);
}
.glass-card-gold:hover {
  background:var(--glass-gold-h);
  box-shadow:var(--spec-gold), 0 20px 56px rgba(0,0,0,.5), 0 0 0 1px rgba(201,168,76,.18);
}

/* ── HOME HERO ────────────────────────────────────────────── */
.hero {
  position:relative; height:100svh; min-height:640px;
  display:flex; align-items:flex-end; overflow:hidden;
}
.hero-bg {
  position:absolute; inset:0;
  background-image:url('assets/hero.jpg');
  background-size:cover; background-position:center 30%;
  filter:brightness(.38) saturate(.85);
  transform:scale(1.06);
  animation:hero-scale 9s var(--ease) forwards;
}
@keyframes hero-scale { to { transform:scale(1) } }
.hero-grain {
  position:absolute; inset:0; opacity:.03; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-vignette {
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 100% 85% at 50% 50%, transparent 35%, rgba(0,0,0,.65) 100%);
}
.hero-gradient {
  position:absolute; bottom:0; left:0; right:0; height:70%;
  background:linear-gradient(to top, var(--bg) 0%, transparent 100%);
}
.hero-line {
  position:absolute; left:0; top:0; bottom:0; width:2px;
  background:linear-gradient(to bottom, transparent, var(--gold) 25%, var(--gold) 75%, transparent);
  opacity:.6;
}
.hero-content {
  position:relative; padding:0 3rem 6rem; max-width:960px;
  animation:hero-up .9s .15s var(--ease) both;
}
@keyframes hero-up { from{opacity:0;transform:translateY(32px)} to{opacity:1;transform:translateY(0)} }

.hero-tag {
  display:inline-flex; align-items:center; gap:.7rem;
  font-size:.58rem; font-weight:500; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1.6rem;
}
.hero-tag::before { content:''; width:2.5rem; height:1px; background:var(--gold) }

.hero-title {
  font-family:var(--serif);
  font-size:clamp(4.5rem, 13vw, 10.5rem);
  font-weight:300; line-height:.88; letter-spacing:-.03em; margin-bottom:1.6rem;
}
.hero-title em { font-style:italic; color:var(--gold) }

.hero-sub {
  font-size:.7rem; font-weight:400; letter-spacing:.28em; text-transform:uppercase;
  color:var(--muted); margin-bottom:2.75rem;
  display:flex; align-items:center; gap:.75rem;
}
.hero-sub::before { content:''; width:1.5rem; height:1px; background:var(--muted) }

.hero-ctas { display:flex; flex-wrap:wrap; gap:1rem; align-items:center }

.hero-scroll {
  position:absolute; bottom:2.5rem; right:2.5rem;
  display:flex; flex-direction:column; align-items:center; gap:.75rem;
  font-size:.52rem; letter-spacing:.3em; text-transform:uppercase; color:var(--muted);
}
.hero-scroll::after {
  content:''; width:1px; height:4rem; background:var(--gold);
  animation:scroll-line 1.8s ease-in-out infinite;
}
@keyframes scroll-line { 0%,100%{transform:scaleY(0);transform-origin:top} 50%{transform:scaleY(1)} }

/* Home stats */
.stats {
  display:grid; grid-template-columns:repeat(4,1fr);
  background:var(--glass-1);
  backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  box-shadow:var(--spec);
}
.stat {
  padding:2.5rem 1.5rem; text-align:center;
  border-right:1px solid var(--border);
  position:relative; overflow:hidden;
  transition:background var(--t-mid);
}
.stat:last-child { border-right:none }
.stat::after {
  content:''; position:absolute;
  bottom:0; left:50%; transform:translateX(-50%);
  width:0; height:2px; background:var(--gold);
  transition:width var(--t-slow) var(--ease);
}
.stat:hover::after { width:55% }
.stat:hover { background:rgba(201,168,76,.04) }
.stat-n {
  font-family:var(--serif); font-size:2.75rem; font-weight:300;
  color:var(--gold); line-height:1; display:block; letter-spacing:-.02em;
}
.stat-l {
  font-size:.57rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); margin-top:.5rem; display:block;
}

/* Home service cards */
.services-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1.25rem; margin-top:4rem;
}
.service-card {
  display:flex; flex-direction:column;
  padding:2.25rem 2rem;
  border-radius:20px; cursor:pointer;
  text-decoration:none; color:var(--text);
  overflow:hidden; position:relative;
  min-height:280px;
}
.service-card-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  filter:brightness(.35) saturate(.8);
  transition:transform var(--t-slow) var(--ease), filter var(--t-slow);
}
.service-card:hover .service-card-bg { transform:scale(1.06); filter:brightness(.45) saturate(1) }
.service-card-glass {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(6,6,6,.8) 0%, rgba(6,6,6,.2) 60%, transparent 100%);
}
.service-card-content { position:relative; z-index:1; margin-top:auto }
.service-card-icon {
  width:2.5rem; height:2.5rem; margin-bottom:auto;
  background:var(--glass-2);
  backdrop-filter:var(--blur-light); -webkit-backdrop-filter:var(--blur-light);
  border:1px solid var(--border); border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--spec);
}
.service-card-tag {
  font-size:.56rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); margin-bottom:.65rem;
  display:block;
}
.service-card-title {
  font-family:var(--serif); font-size:1.6rem; font-weight:300;
  line-height:1.1; margin-bottom:.5rem;
}
.service-card-title em { font-style:italic; color:var(--gold) }
.service-card-desc { font-size:.78rem; color:var(--muted); line-height:1.7 }
.service-card-arrow {
  margin-top:1.25rem;
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.6rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold);
  transition:gap var(--t-fast);
}
.service-card:hover .service-card-arrow { gap:.8rem }

/* ── PAGE HERO (inner pages) ──────────────────────────────── */
.page-hero {
  min-height:44vh; position:relative;
  display:flex; align-items:flex-end;
  padding:0 2rem 4rem;
  overflow:hidden;
}
.page-hero-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center 30%;
  filter:brightness(.35) saturate(.8);
  transform:scale(1.04);
  animation:hero-scale 8s var(--ease) forwards;
}
.page-hero-gradient {
  position:absolute; inset:0;
  background:linear-gradient(to top, var(--bg) 0%, transparent 70%);
}
.page-hero-vignette {
  position:absolute; inset:0;
  background:radial-gradient(ellipse 100% 100% at 50% 50%, transparent 40%, rgba(0,0,0,.55) 100%);
}
.page-hero-content {
  position:relative; max-width:1200px; width:100%; margin:0 auto;
  animation:hero-up .8s .1s var(--ease) both;
}
.page-hero-title {
  font-family:var(--serif);
  font-size:clamp(3rem,7vw,6rem);
  font-weight:300; line-height:.92; letter-spacing:-.02em;
}
.page-hero-title em { font-style:italic; color:var(--gold) }

/* ── GLASS PANELS & COMPONENTS ────────────────────────────── */
.glass-panel {
  background:var(--glass-2);
  backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow);
}

/* Service item (list style) */
.service-item {
  display:flex; gap:1.75rem; align-items:flex-start;
  padding:1.75rem 0; border-bottom:1px solid var(--border);
}
.service-item:first-child { border-top:1px solid var(--border) }
.service-num {
  font-family:var(--serif); font-size:.9rem; font-style:italic;
  color:var(--gold); min-width:1.5rem;
}
.service-name {
  font-family:var(--serif); font-size:1.3rem; font-weight:400; margin-bottom:.4rem;
}
.service-desc { font-size:.8rem; color:var(--muted); line-height:1.75 }

/* Pros cards */
.pros-card {
  padding:2rem;
  border-left:2px solid transparent;
  transition:border-color var(--t-fast), background var(--t-mid);
}
.pros-card:hover { border-left-color:var(--gold); background:rgba(201,168,76,.04) }
.pros-card-icon { width:2.25rem; height:2.25rem; margin-bottom:1rem; opacity:.6 }
.pros-card-title {
  font-family:var(--serif); font-size:1.2rem; font-weight:400; margin-bottom:.5rem;
}
.pros-card-desc { font-size:.8rem; color:var(--muted); line-height:1.75 }

/* Feature cards grid */
.feature-cards { display:grid; grid-template-columns:1fr 1fr; gap:.875rem; margin-top:2rem }
.feature-card {
  padding:1.6rem;
  border-radius:16px;
  transition:transform var(--t-mid) var(--ease-spring), box-shadow var(--t-mid), background var(--t-mid);
}
.feature-card:hover { transform:translateY(-4px) scale(1.01) }
.feature-card-icon { font-size:1.25rem; margin-bottom:.75rem; opacity:.65 }
.feature-card-title { font-family:var(--serif); font-size:1.05rem; font-weight:400; margin-bottom:.4rem }
.feature-card-desc { font-size:.78rem; color:var(--muted); line-height:1.65 }

/* Drone list */
.drone-list { display:flex; flex-direction:column }
.drone-item {
  display:flex; align-items:center; gap:1rem;
  font-size:.86rem; color:var(--muted);
  padding:.9rem 0; border-bottom:1px solid var(--border);
  transition:color var(--t-fast);
}
.drone-item:last-child { border-bottom:none }
.drone-item:hover { color:var(--text) }
.drone-item svg { width:14px; height:14px; color:var(--gold); flex-shrink:0 }
.drone-badge-row { display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.75rem }
.drone-badge {
  display:inline-flex; align-items:center; gap:.4rem;
  background:var(--glass-gold); border:1px solid var(--border-gold);
  color:var(--gold); font-size:.58rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  padding:.45rem .95rem; border-radius:60px;
  backdrop-filter:var(--blur-light); -webkit-backdrop-filter:var(--blur-light);
  box-shadow:var(--spec-gold);
}

/* Portfolio */
.portfolio-filters { display:flex; gap:.4rem; flex-wrap:wrap }
.pf-btn {
  background:var(--glass-1); border:1px solid var(--border);
  color:var(--muted); font-size:.58rem; font-weight:500; letter-spacing:.15em; text-transform:uppercase;
  padding:.45rem 1.1rem; border-radius:60px;
  backdrop-filter:var(--blur-light); -webkit-backdrop-filter:var(--blur-light);
  transition:all var(--t-fast); cursor:pointer;
  box-shadow:var(--spec);
}
.pf-btn.active, .pf-btn:hover {
  background:var(--gold); color:#000; border-color:var(--gold);
  box-shadow:0 2px 16px rgba(201,168,76,.35);
}
.portfolio-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:.875rem;
}
.portfolio-item {
  position:relative; overflow:hidden; border-radius:12px;
  background:var(--bg-surface); cursor:pointer; aspect-ratio:1;
  box-shadow:0 4px 16px rgba(0,0,0,.4);
}
.portfolio-item.wide { grid-column:span 2; aspect-ratio:2/1 }
.portfolio-item.tall { grid-row:span 2 }
.portfolio-item img, .portfolio-item video {
  width:100%; height:100%; object-fit:cover;
  transition:transform var(--t-slow) var(--ease), filter var(--t-slow);
  filter:grayscale(12%);
}
.portfolio-item:hover img, .portfolio-item:hover video { transform:scale(1.07); filter:grayscale(0) }
.portfolio-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(6,6,6,.88) 0%, transparent 55%);
  opacity:0; transition:opacity var(--t-mid);
  display:flex; align-items:flex-end; padding:1.25rem;
}
.portfolio-item:hover .portfolio-overlay { opacity:1 }
.po-cat { font-size:.56rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:.2rem }
.po-title { font-family:var(--serif); font-size:1rem }
.play-btn {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:3.25rem; height:3.25rem; border-radius:50%;
  background:rgba(201,168,76,.9); display:flex; align-items:center; justify-content:center;
  transition:transform var(--t-mid) var(--ease-spring), background var(--t-fast);
  pointer-events:none;
}
.play-btn svg { color:#000; margin-left:3px }
.portfolio-item:hover .play-btn { transform:translate(-50%,-50%) scale(1.12); background:var(--gold-light) }

/* Contact */
.contact-form-wrap {
  padding:2.5rem; border-radius:20px;
  position:relative; overflow:hidden;
}
.contact-form-wrap::after {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(201,168,76,.5), transparent);
}
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem }
.field { display:flex; flex-direction:column; gap:.5rem; margin-bottom:1.1rem }
.field label { font-size:.56rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--muted-2) }
.field input, .field select, .field textarea {
  background:var(--glass-1);
  backdrop-filter:var(--blur-light); -webkit-backdrop-filter:var(--blur-light);
  border:1px solid var(--border);
  color:var(--text); padding:.82rem 1rem; border-radius:10px;
  font-size:.86rem; font-family:var(--sans); outline:none;
  transition:border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
  width:100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color:var(--border-gold);
  background:var(--glass-gold);
  box-shadow:var(--spec-gold);
}
.field input::placeholder, .field textarea::placeholder { color:rgba(255,255,255,.12) }
.field select option { background:var(--bg-2) }
.field.full { grid-column:1/-1 }
.form-submit {
  width:100%; padding:.95rem;
  background:var(--gold); color:#000;
  font-size:.68rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  border:none; border-radius:60px; cursor:pointer;
  box-shadow:var(--shadow-gold);
  transition:background var(--t-fast), transform var(--t-mid) var(--ease-spring), box-shadow var(--t-fast);
}
.form-submit:hover { background:var(--gold-light); transform:translateY(-2px); box-shadow:var(--shadow-gold-h) }
.form-note { font-size:.68rem; color:var(--muted); text-align:center; margin-top:1rem }
.form-msg { padding:.75rem 1rem; border-radius:10px; font-size:.82rem; margin-top:1rem; display:none }
.form-msg.ok { background:rgba(61,153,112,.08); border:1px solid rgba(61,153,112,.22); color:#3d9970 }
.form-msg.err { background:rgba(224,85,85,.08); border:1px solid rgba(224,85,85,.22); color:#e05555 }

/* Avis */
.avis-card {
  padding:2rem; border-radius:20px;
  position:relative; overflow:hidden;
  transition:transform var(--t-mid) var(--ease-spring), box-shadow var(--t-mid), background var(--t-mid);
}
.avis-card::before {
  content:'"'; position:absolute; top:.25rem; right:1.5rem;
  font-family:var(--serif); font-size:7rem; line-height:1;
  color:var(--gold); opacity:.06; pointer-events:none;
}
.avis-card:hover { transform:translateY(-4px) }
.avis-card-stars { display:flex; gap:3px; margin-bottom:1.25rem }
.avis-card-stars span { color:var(--gold); font-size:.9rem }
.avis-stars { display:flex; gap:.25rem; justify-content:center; margin:.75rem 0 }
.avis-stars span { color:var(--gold); font-size:1.1rem }
.google-badge { display:inline-flex; align-items:center; gap:.5rem; font-size:.7rem; color:var(--muted); margin-top:.3rem }
.avis-text { font-size:.85rem; color:var(--muted); line-height:1.85; font-style:italic; margin-bottom:1.5rem }
.avis-author strong { font-size:.84rem; color:var(--text); display:block }
.avis-author span { font-size:.68rem; color:var(--muted) }

/* ── FOOTER ───────────────────────────────────────────────── */
.footer {
  background:var(--glass-1);
  backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);
  border-top:1px solid var(--border);
  padding:5rem 2rem 2rem;
  box-shadow:var(--spec);
}
.footer-top { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:3rem; margin-bottom:3.5rem }
.footer-brand .logo { font-family:var(--serif); font-size:1.6rem; font-style:italic; margin-bottom:.75rem }
.footer-brand .logo span { color:var(--gold) }
.footer-brand p { font-size:.8rem; color:var(--muted); line-height:1.75; max-width:280px; margin-bottom:1.5rem }
.footer-social { display:flex; gap:.65rem }
.social-link {
  width:2.2rem; height:2.2rem;
  background:var(--glass-2); border:1px solid var(--border); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); transition:all var(--t-fast);
  backdrop-filter:var(--blur-light); -webkit-backdrop-filter:var(--blur-light);
  box-shadow:var(--spec);
}
.social-link:hover { border-color:var(--border-gold); color:var(--gold) }
.footer-col h4 { font-size:.57rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--muted-2); margin-bottom:1.5rem }
.footer-col a, .footer-col p { display:block; font-size:.8rem; color:rgba(242,239,233,.38); padding:.2rem 0; transition:color var(--t-fast) }
.footer-col a:hover { color:var(--gold) }
.footer-bottom {
  border-top:1px solid var(--border); padding-top:1.75rem;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem;
}
.footer-copy { font-size:.68rem; color:rgba(242,239,233,.25) }
.footer-legal { display:flex; gap:1.5rem }
.footer-legal a { font-size:.68rem; color:rgba(242,239,233,.25); transition:color var(--t-fast) }
.footer-legal a:hover { color:var(--muted) }
.footer-superadmin { font-size:.9rem; color:rgba(242,239,233,.08); transition:color var(--t-fast) }
.footer-superadmin:hover { color:rgba(242,239,233,.25) }

/* ── LIGHTBOX ─────────────────────────────────────────────── */
.lb {
  position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,.95);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:none; align-items:center; justify-content:center;
}
.lb.open { display:flex }
.lb-img { max-width:92vw; max-height:88vh; object-fit:contain; border-radius:4px }
.lb-close,.lb-prev,.lb-next {
  position:absolute;
  background:var(--glass-2); border:1px solid var(--border);
  color:var(--text); border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--t-fast);
  backdrop-filter:var(--blur-light); box-shadow:var(--spec);
}
.lb-close { top:1.5rem; right:1.5rem; width:3rem; height:3rem; font-size:1.1rem }
.lb-prev { left:1.5rem; top:50%; transform:translateY(-50%); width:3rem; height:3rem }
.lb-next { right:1.5rem; top:50%; transform:translateY(-50%); width:3rem; height:3rem }
.lb-close:hover,.lb-prev:hover,.lb-next:hover { background:var(--glass-hover) }
.lb-info { position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); text-align:center }
.lb-cat { font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold) }
.lb-title { font-family:var(--serif); font-size:1.1rem }
.vmodal {
  position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,.97);
  display:none; align-items:center; justify-content:center; flex-direction:column; gap:1rem;
}
.vmodal.open { display:flex }
.vmodal video { max-width:92vw; max-height:80vh; border-radius:8px }
.vmodal-close {
  position:absolute; top:1.5rem; right:1.5rem;
  background:var(--glass-2); border:1px solid var(--border);
  color:var(--text); width:3rem; height:3rem; border-radius:50%;
  font-size:1.1rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--spec);
}

/* ── MODALS ───────────────────────────────────────────────── */
.modal-overlay {
  display:none; position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,.8);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  overflow-y:auto; padding:2rem;
}
.modal-box {
  max-width:680px; margin:2rem auto;
  background:var(--glass-2);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--border);
  padding:2.75rem; border-radius:20px; position:relative;
  box-shadow:var(--shadow);
}
.modal-close-btn {
  position:absolute; top:1.25rem; right:1.25rem;
  background:var(--glass-2); border:1px solid var(--border);
  color:var(--text); width:2.2rem; height:2.2rem;
  border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--spec);
}
.modal-title { font-family:var(--serif); font-size:1.65rem; font-style:italic; color:var(--gold); margin-bottom:1.75rem }
.modal-body { font-size:.84rem; color:var(--muted); line-height:1.85 }
.modal-body strong { color:var(--text) }

/* ── TOAST ────────────────────────────────────────────────── */
#toast {
  position:fixed; bottom:2rem; right:2rem; z-index:300;
  background:var(--glass-3);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--border);
  padding:.85rem 1.5rem; border-radius:12px; font-size:.82rem;
  transform:translateY(100px); opacity:0; transition:all var(--t-mid) var(--ease);
  pointer-events:none; max-width:320px; box-shadow:var(--shadow);
}
#toast.show { transform:translateY(0); opacity:1 }
#toast.ok { border-left:3px solid #3d9970; color:#3d9970 }
#toast.err { border-left:3px solid #e05555; color:#e05555 }

/* ── REVEAL ───────────────────────────────────────────────── */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease) }
.reveal.visible { opacity:1; transform:translateY(0) }
.reveal-d1 { transition-delay:.1s }
.reveal-d2 { transition-delay:.2s }
.reveal-d3 { transition-delay:.3s }

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width:1024px) {
  .services-grid { grid-template-columns:repeat(2,1fr) }
  .portfolio-grid { grid-template-columns:repeat(2,1fr) }
  .portfolio-item.wide { grid-column:span 2 }
  .footer-top { grid-template-columns:1fr 1fr }
  .two-col { grid-template-columns:1fr !important; gap:3rem !important }
}
@media (max-width:768px) {
  .nav { top:.7rem; left:.7rem; right:.7rem; padding:.75rem 1.2rem }
  .nav-links { display:none }
  .nav-burger { display:flex }
  section { padding:5rem 1.25rem }
  .stats { grid-template-columns:repeat(2,1fr) }
  .stat { border-right:none; border-bottom:1px solid var(--border) }
  .stat:nth-child(odd) { border-right:1px solid var(--border) }
  .stat:nth-child(3),.stat:last-child { border-bottom:none }
  .services-grid { grid-template-columns:1fr }
  .form-row { grid-template-columns:1fr }
  .footer-top { grid-template-columns:1fr }
  .footer-bottom { flex-direction:column; text-align:center }
  .footer-legal { justify-content:center; flex-wrap:wrap }
  .portfolio-grid { grid-template-columns:1fr }
  .portfolio-item.wide { grid-column:span 1; aspect-ratio:1 }
  .hero-content { padding:0 1.5rem 5rem }
  .hero-ctas { flex-direction:column; align-items:flex-start }
  .feature-cards { grid-template-columns:1fr }
  .page-hero { min-height:36vh; padding:0 1.25rem 3rem }
  .page-hero-title { font-size:clamp(2.5rem,9vw,4rem) }
}
@media (max-width:480px) {
  .hero-title { font-size:clamp(3.5rem,18vw,5rem) }
  .stats { grid-template-columns:1fr 1fr }
  .contact-form-wrap { padding:1.5rem }
}


/* ── LANG SWITCHER ────────────────────────────────────────── */
.lang-switch {
  display:flex; align-items:center; gap:.25rem;
  background:var(--glass-2);
  backdrop-filter:var(--blur-light); -webkit-backdrop-filter:var(--blur-light);
  border:1px solid var(--border);
  border-radius:60px; padding:.3rem .45rem;
  box-shadow:var(--spec);
}
.lang-sep { color:var(--muted-2); font-size:.65rem; user-select:none; padding:0 .1rem }
.lang-btn {
  background:none; border:none; cursor:pointer;
  font-family:var(--sans); font-size:.58rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); padding:.3rem .55rem; border-radius:60px;
  display:flex; align-items:center; gap:.3rem;
  transition:color var(--t-fast), background var(--t-fast);
}
.lang-btn:hover { color:var(--text) }
.lang-btn.active {
  background:var(--gold); color:#000;
  box-shadow:0 2px 10px rgba(201,168,76,.35);
}
.lang-flag { font-size:.85rem; line-height:1; display:inline-block }
.lang-code { font-size:.58rem; font-weight:700; letter-spacing:.1em }
.lang-btn.active .lang-flag,
.lang-btn.active .lang-code { color:#000 }

/* Drawer lang switcher */
.lang-switch-drawer { display:flex; gap:.75rem; margin:.75rem 0; justify-content:center }
.lang-btn-drawer {
  background:var(--glass-2); border:1px solid var(--border);
  backdrop-filter:var(--blur-light); -webkit-backdrop-filter:var(--blur-light);
  color:var(--muted); font-family:var(--serif); font-size:1.25rem; font-style:italic;
  cursor:pointer; padding:.6rem 1.75rem; border-radius:60px;
  display:flex; align-items:center; gap:.5rem;
  transition:all var(--t-fast); box-shadow:var(--spec);
}
.lang-btn-drawer:hover { color:var(--gold); border-color:var(--border-gold) }
.lang-flag-lg { font-size:1.1rem }

/* ── COOKIE BANNER ────────────────────────────────────────── */
#cookie-banner {
  position:fixed; bottom:1.5rem; left:50%;
  transform:translateX(-50%) translateY(120%);
  z-index:500;
  width:min(640px, calc(100vw - 2rem));
  background:var(--glass-3);
  backdrop-filter:var(--blur-heavy); -webkit-backdrop-filter:var(--blur-heavy);
  border:1px solid var(--border); border-radius:20px;
  padding:1.75rem 2rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 20px 60px rgba(0,0,0,.6);
  display:flex; flex-direction:column; gap:.85rem;
  transition:transform .4s cubic-bezier(.34,1.4,.64,1);
}
#cookie-banner.show { transform:translateX(-50%) translateY(0) }
#cookie-banner strong { font-family:var(--serif); font-size:1.15rem; font-style:italic; color:var(--text); display:block }
#cookie-banner p { font-size:.82rem; color:var(--muted); line-height:1.75; margin:0 }
.cb-actions { display:flex; gap:.75rem; flex-wrap:wrap }
.cb-btn { font-family:var(--sans); font-size:.65rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; padding:.65rem 1.5rem; border-radius:60px; cursor:pointer; transition:all 180ms }
.cb-primary { background:var(--gold); color:#000; border:none; box-shadow:0 4px 24px rgba(201,168,76,.28) }
.cb-primary:hover { background:var(--gold-light); transform:translateY(-1px) }
.cb-ghost { background:var(--glass-2); color:var(--muted); border:1px solid var(--border); backdrop-filter:var(--blur-light); box-shadow:inset 0 1px 0 rgba(255,255,255,.18) }
.cb-ghost:hover { color:var(--text); border-color:var(--border-gold) }
.cb-link { font-size:.72rem; color:var(--muted); text-decoration:underline; text-underline-offset:3px; align-self:flex-start; transition:color 180ms }
.cb-link:hover { color:var(--gold) }
@media (max-width:640px) {
  #cookie-banner { bottom:0; left:0; right:0; transform:translateY(120%); width:100%; border-radius:20px 20px 0 0 }
  #cookie-banner.show { transform:translateY(0) }
  .two-col-3 { grid-template-columns:1fr !important }
}