/* ============================================================
   PrivTeint — Design System
   main.css
   ============================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Inter:wght@300;400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');

/* ── Design Tokens ── */
:root {
  /* Colors */
  --navy:       #0C1B2E;
  --navy-dark:  #08111e;
  --navy-light: #1a3352;
  --gold:       #C9A84C;
  --gold-light: #d9bc72;
  --gold-dark:  #b08838;
  --bg:         #FAFAF7;
  --bg-alt:     #FFFFFF;
  --white:      #FFFFFF;
  --text:       #1a1a14;
  --text-muted: #6b6b5e;
  --border:     #e8e5de;

  /* Typography */
  --font-body:  'Inter', system-ui, sans-serif;
  --font-head:  'Manrope', 'Inter', system-ui, sans-serif;
  --font-serif: 'Cormorant Garamond', Georgia, serif;

  /* Font sizes (fluid) */
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  1.875rem;
  --fs-3xl:  2.25rem;
  --fs-4xl:  3rem;
  --fs-5xl:  3.75rem;

  /* Spacing */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* Layout */
  --max-w:        1200px;
  --max-w-narrow: 760px;
  --radius-sm:    6px;
  --radius:       12px;
  --radius-lg:    20px;
  --radius-full:  9999px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(12,27,46,.07), 0 1px 2px rgba(12,27,46,.05);
  --shadow:     0 4px 16px rgba(12,27,46,.08), 0 2px 6px rgba(12,27,46,.05);
  --shadow-md:  0 8px 32px rgba(12,27,46,.12), 0 4px 12px rgba(12,27,46,.06);
  --shadow-lg:  0 20px 60px rgba(12,27,46,.18), 0 8px 24px rgba(12,27,46,.10);

  /* Transitions */
  --ease:       cubic-bezier(.4,0,.2,1);
  --t-fast:     150ms var(--ease);
  --t-base:     250ms var(--ease);
  --t-slow:     400ms var(--ease);

  /* Header height — pill floats 14px from top */
  --header-h: 64px;
  --header-top: 14px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; }

/* ── Selection ── */
::selection { background: rgba(201,168,76,.22); color: var(--navy); }

/* ── Reading progress bar ── */
#read-bar {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: var(--gold); z-index: 9999; transition: width .08s linear;
  pointer-events: none;
}
body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
input, textarea, select { font-family: inherit; font-size: inherit; }

/* ── Typography ── */
h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.15;
  color: var(--navy);
}
h1 { font-size: clamp(var(--fs-3xl), 5.5vw, var(--fs-5xl)); }
h2 { font-size: clamp(var(--fs-2xl), 4vw, var(--fs-4xl)); }
h3 { font-size: clamp(var(--fs-xl), 2.5vw, var(--fs-2xl)); }
h4 { font-size: var(--fs-lg); }
p  { max-width: 68ch; }

/* Serif heading — for section titles (Cormorant Garamond light) */
h2.serif, .section-title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(2.2rem, 4.5vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.text-gold   { color: var(--gold); }
.text-navy   { color: var(--navy); }
.text-muted  { color: var(--text-muted); }
.text-white  { color: var(--white); }
.text-center { text-align: center; }
.text-center p { margin-inline: auto; }

/* ── Layout ── */
.container {
  width: min(var(--max-w), 100% - var(--sp-8));
  margin-inline: auto;
}
.container--narrow {
  width: min(var(--max-w-narrow), 100% - var(--sp-8));
  margin-inline: auto;
}

.section {
  padding-block: var(--sp-20);
}
.section--lg {
  padding-block: var(--sp-32);
}
.section--sm {
  padding-block: var(--sp-12);
}
.section--dark {
  background: var(--navy);
  color: var(--white);
}
.section--dark h2, .section--dark h3, .section--dark h4 {
  color: var(--white);
}
.section--alt {
  background: var(--bg-alt);
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }

@media (max-width: 900px) {
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 400px) {
  .grid-4 { grid-template-columns: 1fr; }
}

.flex         { display: flex; }
.flex-col     { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-4  { gap: var(--sp-4); }
.gap-6  { gap: var(--sp-6); }
.gap-8  { gap: var(--sp-8); }

/* ── Section headers ── */
.section-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--sp-4);
}
.section-title {
  margin-bottom: var(--sp-4);
}
.section-intro {
  font-size: var(--fs-md);
  color: var(--text-muted);
  margin-bottom: var(--sp-12);
}

/* Gold divider line (48px × 1px) */
.gold-line {
  width: 48px;
  height: 1px;
  background: var(--gold);
  display: block;
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-8);
}
.text-center .gold-line { margin-inline: auto; }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-8);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .03em;
  border-radius: var(--radius-full);
  transition: all var(--t-base);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.12);
  opacity: 0;
  transition: opacity var(--t-fast);
}
.btn:hover::after { opacity: 1; }

.btn--gold {
  background: var(--gold);
  color: var(--white);
  box-shadow: 0 4px 18px rgba(201,161,90,.35);
}
.btn--gold:hover {
  background: var(--gold-dark);
  box-shadow: 0 6px 24px rgba(201,161,90,.45);
  transform: translateY(-1px);
}

.btn--navy {
  background: var(--navy);
  color: var(--white);
  box-shadow: var(--shadow);
}
.btn--navy:hover {
  background: var(--navy-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn--outline {
  background: transparent;
  border: 2px solid var(--white);
  color: var(--white);
}
.btn--outline:hover {
  background: rgba(255,255,255,.1);
  transform: translateY(-1px);
}

.btn--outline-navy {
  background: transparent;
  border: 2px solid var(--navy);
  color: var(--navy);
}
.btn--outline-navy:hover {
  background: var(--navy);
  color: var(--white);
}

.btn--lg {
  padding: var(--sp-5) var(--sp-10);
  font-size: var(--fs-base);
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

/* ── Header — Floating Liquid Glass Pill ── */
.site-header {
  position: fixed;
  top: var(--header-top);
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 1280px;
  z-index: 1000;
  height: var(--header-h);
  border-radius: 60px;
  /* Hero mode — dark glass pill */
  background: rgba(8, 17, 30, 0.38);
  backdrop-filter: blur(24px) saturate(195%) brightness(1.06);
  -webkit-backdrop-filter: blur(24px) saturate(195%) brightness(1.06);
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -1px 0 rgba(201,168,76,0.08),
    0 8px 40px rgba(8,17,30,0.28),
    0 2px 8px rgba(8,17,30,0.14);
  transition: background var(--t-slow), border-color var(--t-slow), box-shadow var(--t-slow);
}
/* Scrolled past hero — cream glass pill */
.site-header.scrolled {
  background: rgba(250,250,247,0.94);
  border-color: rgba(12,27,46,0.09);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 8px 40px rgba(12,27,46,0.13),
    0 2px 8px rgba(12,27,46,0.07);
}
.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
}
.header-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.header-logo img {
  height: 44px;
  width: auto;
}
.header-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.header-logo img {
  filter: brightness(0) invert(1);
  transition: filter var(--t-slow);
}
.site-header.scrolled .header-logo img {
  filter: none;
}
.header-nav a {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: rgba(255,255,255,0.82);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  transition: color var(--t-fast), background var(--t-fast);
  white-space: nowrap;
}
.header-nav a:hover,
.header-nav a.active {
  color: var(--white);
  background: rgba(255,255,255,0.12);
}
.site-header.scrolled .header-nav a {
  color: var(--text);
}
.site-header.scrolled .header-nav a:hover,
.site-header.scrolled .header-nav a.active {
  color: var(--navy);
  background: rgba(23,59,86,0.07);
}
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
}
.header-tel {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: rgba(255,255,255,0.88);
  transition: color var(--t-fast);
}
.header-tel:hover { color: var(--gold); }
.site-header.scrolled .header-tel { color: var(--navy); }

/* Burger */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  gap: 5px;
  border-radius: var(--radius-sm);
  transition: background var(--t-fast);
}
.burger:hover { background: rgba(23,59,86,.07); }
.burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: rgba(255,255,255,0.88);
  border-radius: 2px;
  transition: transform var(--t-base), opacity var(--t-base), width var(--t-base), background var(--t-slow);
}
.site-header.scrolled .burger span { background: var(--navy); }
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; width: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile Nav — floats below the pill header */
.mobile-nav {
  position: fixed;
  top: calc(var(--header-h) + var(--header-top) + 8px);
  left: 16px; right: 16px;
  background: rgba(250,250,247,0.97);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(12,27,46,0.09);
  border-radius: 20px;
  padding: var(--sp-4);
  transform: translateY(-20px);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--t-base), opacity var(--t-base);
  z-index: 999;
  box-shadow: 0 12px 40px rgba(12,27,46,0.16);
}
.mobile-nav.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.mobile-nav.open { transform: translateY(0); }
.mobile-nav a {
  display: block;
  padding: var(--sp-4) var(--sp-4);
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--text);
  border-radius: var(--radius-sm);
  transition: background var(--t-fast), color var(--t-fast);
  border-bottom: 1px solid var(--bg-alt);
}
.mobile-nav a:last-of-type { border-bottom: none; }
.mobile-nav a:hover { background: var(--bg); color: var(--navy); }
.mobile-nav .btn {
  display: flex;
  width: 100%;
  margin-top: var(--sp-4);
}

@media (max-width: 900px) {
  .header-nav { display: none; }
  .header-tel  { display: none; }
  .burger { display: flex; }
}

/* ── Hero ── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--navy-dark);
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('/assets/img/pose-film-vitrage-miroir-sans-tain-hyeres-var-83.webp');
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
  transition: transform 8s ease;
}
.hero.loaded .hero-bg { transform: scale(1); }
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(15,42,62,.88) 0%,
    rgba(15,42,62,.68) 55%,
    rgba(15,42,62,.35) 100%
  );
}
.hero-content {
  position: relative;
  z-index: 2;
  padding-block: calc(var(--header-h) + var(--header-top) + var(--sp-16)) var(--sp-20);
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  background: rgba(201,161,90,.18);
  border: 1px solid rgba(201,161,90,.4);
  color: var(--gold-light);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-full);
  margin-bottom: var(--sp-6);
}
.hero h1 {
  color: var(--white);
  margin-bottom: var(--sp-6);
  max-width: 14ch;
}
.hero h1 em {
  font-style: normal;
  color: var(--gold);
}
.hero-sub {
  font-size: var(--fs-lg);
  color: rgba(255,255,255,.82);
  max-width: 52ch;
  margin-bottom: var(--sp-10);
  line-height: 1.6;
  font-weight: 300;
}
.hero-ctas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-bottom: var(--sp-16);
}
.hero-trust {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
}
.hero-trust-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: rgba(255,255,255,.7);
  font-size: var(--fs-sm);
}
.hero-trust-item svg {
  color: var(--gold);
  flex-shrink: 0;
}
.hero-scroll {
  position: absolute;
  bottom: var(--sp-8);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  color: rgba(255,255,255,.5);
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  animation: bounce 2s ease-in-out infinite;
}
@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}

/* ── Cards ── */
.card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.card-img {
  aspect-ratio: 16/10;
  overflow: hidden;
}
.card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.card:hover .card-img img { transform: scale(1.05); }
.card-body {
  padding: var(--sp-6);
}
.card-tag {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--sp-3);
}
.card-title {
  font-size: var(--fs-lg);
  margin-bottom: var(--sp-3);
  color: var(--navy);
}
.card-text {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.6;
}

/* Solution cards */
.solution-card {
  background: var(--white);
  border-radius: 16px;
  padding: var(--sp-8);
  border: 1px solid var(--border);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  position: relative;
  overflow: hidden;
}
.solution-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 50px rgba(12,27,46,.08);
  border-color: rgba(201,168,76,.35);
}
.solution-icon {
  width: 48px;
  height: 48px;
  background: rgba(201,168,76,.1);
  border: 1px solid rgba(201,168,76,.25);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  flex-shrink: 0;
  transition: background var(--t-base), border-color var(--t-base);
}
.solution-card h3 {
  font-size: var(--fs-lg);
  color: var(--navy);
}
.solution-card p {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.65;
}
.solution-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--gold);
  margin-top: auto;
  transition: gap var(--t-fast);
}
.solution-link:hover { gap: var(--sp-3); }

/* Segment cards */
.segment-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
  cursor: default;
}
.segment-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.segment-card:hover img { transform: scale(1.06); }
.segment-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(15,42,62,.85) 100%);
}
.segment-body {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: var(--sp-6);
}
.segment-body h3 {
  color: var(--white);
  font-size: var(--fs-xl);
  margin-bottom: var(--sp-1);
}
.segment-body p {
  color: rgba(255,255,255,.75);
  font-size: var(--fs-sm);
}

/* ── Feature list ── */
.feature-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.feature-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
}
.feature-icon {
  width: 40px;
  height: 40px;
  background: rgba(201,161,90,.12);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 2px;
}
.feature-body h4 {
  font-size: var(--fs-base);
  color: var(--navy);
  margin-bottom: var(--sp-1);
}
.feature-body p {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  max-width: 48ch;
}

/* ── Stats strip ── */
.stats-strip {
  background: var(--navy);
  padding-block: var(--sp-12);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
  text-align: center;
}
.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}
.stat-number {
  font-family: var(--font-head);
  font-size: clamp(2.6rem, 3.8vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--gold);
  line-height: 1;
}
.stat-label {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.7);
  max-width: 16ch;
  text-align: center;
}
@media (max-width: 640px) {
  .stats-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
}

/* ── Process steps ── */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
  position: relative;
}
.steps::before { display: none; }
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr 1fr; }
  .steps::before { display: none; }
}
@media (max-width: 480px) {
  .steps { grid-template-columns: 1fr; }
}
.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-4);
  position: relative;
  z-index: 1;
}
.step-item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 32px;
  left: calc(50% + 32px);
  width: calc(100% - 64px + var(--sp-6));
  height: 1px;
  background: linear-gradient(90deg,
    rgba(201,168,76,.3) 0%,
    rgba(201,168,76,.65) 40%,
    rgba(201,168,76,.65) 60%,
    rgba(201,168,76,.3) 100%
  );
  z-index: 0;
  pointer-events: none;
}
.step-num {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  background: var(--bg);
  border: 1.5px solid rgba(201,168,76,.55);
  color: var(--gold);
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: .02em;
}
.step-item h4 { color: var(--navy); }
.step-item p { font-size: var(--fs-sm); color: var(--text-muted); max-width: 20ch; margin-inline: auto; }

/* ── CTA Banner ── */
.cta-banner {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  border-radius: var(--radius-lg);
  padding: var(--sp-12) var(--sp-16);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(201,161,90,.18) 0%, transparent 70%);
  pointer-events: none;
}
.cta-banner-text h2 {
  color: var(--white);
  margin-bottom: var(--sp-3);
}
.cta-banner-text p {
  color: rgba(255,255,255,.75);
  font-size: var(--fs-md);
}
.cta-banner-actions {
  display: flex;
  gap: var(--sp-4);
  flex-shrink: 0;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .cta-banner {
    flex-direction: column;
    text-align: center;
    padding: var(--sp-10) var(--sp-8);
  }
  .cta-banner-actions { justify-content: center; }
}

/* ── Before/After image ── */
.before-after {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 16/9;
  position: relative;
}
.before-after img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.before-after-label {
  position: absolute;
  top: var(--sp-4);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.before-after-label.avant {
  left: var(--sp-4);
  background: rgba(0,0,0,.6);
  color: var(--white);
}
.before-after-label.apres {
  right: var(--sp-4);
  background: var(--gold);
  color: var(--white);
}

/* ── Gallery ── */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}
.gallery-item {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4/3;
  cursor: zoom-in;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.gallery-item:hover img { transform: scale(1.06); }
@media (max-width: 640px) {
  .gallery { grid-template-columns: 1fr 1fr; }
}

/* ── Contact form ── */
.contact-grid {
  display: grid;
  grid-template-columns: 5fr 4fr;
  gap: var(--sp-12);
  align-items: start;
}
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
}
.contact-form-wrap {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--sp-10);
  box-shadow: var(--shadow-md);
}
.form-title {
  font-size: var(--fs-2xl);
  color: var(--navy);
  margin-bottom: var(--sp-8);
}
.form-group {
  margin-bottom: var(--sp-5);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
@media (max-width: 540px) {
  .form-row { grid-template-columns: 1fr; }
}
label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
  margin-bottom: var(--sp-2);
}
.required::after {
  content: ' *';
  color: var(--gold);
}
input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
  width: 100%;
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: var(--fs-base);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  appearance: none;
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(23,59,86,.1);
}
input::placeholder,
textarea::placeholder { color: #aaa; }
textarea {
  resize: vertical;
  min-height: 130px;
}
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23173B56' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  padding-right: var(--sp-10);
  cursor: pointer;
}
.form-submit {
  margin-top: var(--sp-6);
}
.form-submit .btn { width: 100%; }

.form-success {
  display: none;
  background: rgba(23,59,86,.06);
  border: 1px solid var(--navy);
  border-radius: var(--radius);
  padding: var(--sp-6);
  text-align: center;
  color: var(--navy);
  font-weight: 500;
}
.form-error {
  display: none;
  background: rgba(200,50,50,.07);
  border: 1px solid rgba(200,50,50,.4);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5);
  color: #c03030;
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-5);
}

/* Info sidebar */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}
.info-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow);
}
.info-card h3 {
  font-size: var(--fs-lg);
  color: var(--navy);
  margin-bottom: var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.info-card h3 span {
  width: 36px;
  height: 36px;
  background: rgba(201,161,90,.12);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  flex-shrink: 0;
}
.info-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-sm);
}
.info-row:last-child { margin-bottom: 0; }
.info-row svg {
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 2px;
}
.info-row a {
  color: var(--navy);
  font-weight: 500;
  transition: color var(--t-fast);
}
.info-row a:hover { color: var(--gold); }

/* ── Page hero (inner pages) ── */
.page-hero {
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 100%);
  padding-top: calc(var(--header-h) + var(--header-top) + var(--sp-16));
  padding-bottom: var(--sp-20);
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -5%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(201,161,90,.14) 0%, transparent 65%);
  pointer-events: none;
}
.page-hero-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--sp-4);
}
.page-hero h1 {
  color: var(--white);
  margin-bottom: var(--sp-4);
}
.page-hero p {
  font-size: var(--fs-lg);
  color: rgba(255,255,255,.78);
  max-width: 60ch;
  font-weight: 300;
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: rgba(255,255,255,.5);
  margin-bottom: var(--sp-6);
}
.breadcrumb a { color: rgba(255,255,255,.65); }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb span { color: rgba(255,255,255,.35); }

/* ── Accordion / FAQ ── */
.accordion { display: flex; flex-direction: column; gap: var(--sp-3); }
.accordion-item {
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
}
.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  text-align: left;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--navy);
  transition: background var(--t-fast);
}
.accordion-trigger:hover { background: var(--bg); }
.accordion-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: rgba(201,161,90,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  flex-shrink: 0;
  transition: transform var(--t-base), background var(--t-base);
}
.accordion-item.open .accordion-icon {
  transform: rotate(45deg);
  background: var(--gold);
  color: var(--white);
}
.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--t-slow);
}
.accordion-body-inner {
  padding: 0 var(--sp-6) var(--sp-6);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.7;
}

/* ── Trust logos / badges ── */
.trust-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-10);
  flex-wrap: wrap;
  opacity: .7;
  filter: grayscale(1);
  transition: opacity var(--t-base);
}
.trust-bar:hover { opacity: 1; filter: none; }

/* ── Review card ── */
.review-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.stars { color: var(--gold); letter-spacing: 2px; }
.review-text {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.7;
}
.reviewer {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: auto;
}
.reviewer-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--white);
  flex-shrink: 0;
}
.reviewer-name { font-size: var(--fs-sm); font-weight: 600; color: var(--navy); }
.reviewer-meta { font-size: var(--fs-xs); color: var(--text-muted); }

/* ── Footer ── */
.site-footer {
  background: #0C1B2E;
  color: rgba(255,255,255,.55);
  padding-top: var(--sp-20);
}
.hover-gold {
  color: rgba(255,255,255,.55);
  transition: color var(--t-fast);
}
.hover-gold:hover { color: var(--gold); }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: var(--sp-10);
  padding-bottom: var(--sp-16);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .footer-grid { grid-template-columns: 1fr; }
}
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.footer-logo img {
  height: 40px;
  width: auto;
  opacity: .9;
}
.footer-desc {
  font-size: var(--fs-sm);
  line-height: 1.7;
  max-width: 30ch;
}
.footer-social {
  display: flex;
  gap: var(--sp-3);
}
.social-link {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.6);
  transition: background var(--t-fast), color var(--t-fast);
}
.social-link:hover {
  background: var(--gold);
  color: var(--white);
}
.footer-col h4 {
  color: var(--white);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: var(--sp-5);
}
.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.footer-links a {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.6);
  transition: color var(--t-fast), padding-left var(--t-fast);
}
.footer-links a:hover {
  color: var(--gold);
  padding-left: var(--sp-2);
}
.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.6);
  margin-bottom: var(--sp-4);
}
.footer-contact-item svg {
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 2px;
}
.footer-contact-item a {
  color: rgba(255,255,255,.75);
  transition: color var(--t-fast);
}
.footer-contact-item a:hover { color: var(--gold); }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-6);
  font-size: var(--fs-xs);
  color: rgba(255,255,255,.4);
  flex-wrap: wrap;
}
.footer-bottom-links {
  display: flex;
  gap: var(--sp-5);
  flex-wrap: wrap;
}
.footer-bottom-links a {
  color: rgba(255,255,255,.4);
  transition: color var(--t-fast);
}
.footer-bottom-links a:hover { color: rgba(255,255,255,.7); }

/* ── Legal / CGV pages ── */
.legal-content {
  max-width: 800px;
  margin-inline: auto;
  padding-block: var(--sp-16);
}
.legal-content h2 {
  font-size: var(--fs-xl);
  margin-top: var(--sp-12);
  margin-bottom: var(--sp-4);
}
.legal-content h3 {
  font-size: var(--fs-lg);
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-3);
}
.legal-content p, .legal-content li {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.8;
  max-width: none;
}
.legal-content ul {
  list-style: disc;
  padding-left: var(--sp-6);
  margin-bottom: var(--sp-4);
}
.legal-content ul li { margin-bottom: var(--sp-2); }
.legal-content p { margin-bottom: var(--sp-4); }
.legal-content a { color: var(--gold); text-decoration: underline; }

/* ── Utility ── */
.mt-auto   { margin-top: auto; }
.mt-4      { margin-top: var(--sp-4); }
.mt-8      { margin-top: var(--sp-8); }
.mt-12     { margin-top: var(--sp-12); }
.mb-4      { margin-bottom: var(--sp-4); }
.mb-6      { margin-bottom: var(--sp-6); }
.mb-8      { margin-bottom: var(--sp-8); }
.pt-0      { padding-top: 0 !important; }
.pb-0      { padding-bottom: 0 !important; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── Fade-in on scroll ── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.visible {
  opacity: 1;
  transform: none;
}
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .4s; }

/* ── Split layout ── */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
}
.split.reverse { direction: rtl; }
.split.reverse > * { direction: ltr; }
@media (max-width: 768px) {
  .split { grid-template-columns: 1fr; gap: var(--sp-10); }
  .split.reverse { direction: ltr; }
}
.split-img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4/3;
}
.split-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.split-content { display: flex; flex-direction: column; gap: var(--sp-6); }
.split-content p { color: var(--text-muted); font-size: var(--fs-md); }

/* ── Map placeholder ── */
.map-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--bg-alt);
}
.map-wrap iframe {
  display: block;
  width: 100%;
  border: none;
}

/* ── Floating CTA (mobile) ── */
.floating-cta {
  position: fixed;
  bottom: var(--sp-5);
  left: 50%;
  transform: translateX(-50%);
  z-index: 900;
  display: none;
  padding: var(--sp-4) var(--sp-8);
  font-size: var(--fs-base);
  font-weight: 700;
  border-radius: var(--radius-full);
  background: var(--gold);
  color: var(--white);
  box-shadow: 0 8px 32px rgba(201,161,90,.55);
  transition: transform var(--t-base), box-shadow var(--t-base);
  white-space: nowrap;
}
.floating-cta:hover { transform: translateX(-50%) translateY(-2px); box-shadow: 0 12px 40px rgba(201,161,90,.65); }
@media (max-width: 640px) {
  .floating-cta { display: flex; align-items: center; gap: var(--sp-2); }
}

/* ── Smooth page load ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.animate-up { animation: fadeUp .5s var(--ease) both; }

/* ══════════════════════════════════════════════════════════
   PREMIUM ADDITIONS
   ══════════════════════════════════════════════════════════ */

/* ── Hero slogan ── */
.hero-slogan {
  font-family: var(--font-serif);
  font-size: clamp(3.5rem, 8vw, 7rem);
  font-weight: 300;
  line-height: 1.05;
  color: var(--white);
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-5);
  max-width: none;
}
.hero-slogan em {
  font-style: italic;
  color: var(--gold);
  font-weight: 400;
}

/* ── Hero marquee ── */
.hero-marquee {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  overflow: hidden;
  padding: 11px 0;
  background: rgba(201,161,90,0.1);
  border-top: 1px solid rgba(201,161,90,0.22);
  z-index: 3;
  pointer-events: none;
}
.hero-marquee-track {
  display: flex;
  white-space: nowrap;
  animation: marquee 40s linear infinite;
}
.hero-marquee-track span {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  padding-right: 4rem;
  flex-shrink: 0;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── 3D Film Demo ── */
.film-demo-section {
  background: linear-gradient(160deg, #0a1e2e 0%, var(--navy-dark) 50%, #0d2438 100%);
  position: relative;
  overflow: hidden;
}
.film-demo-section::before {
  content: '';
  position: absolute;
  top: -200px; right: -100px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(201,161,90,0.07) 0%, transparent 65%);
  pointer-events: none;
}
.film-demo-scene {
  perspective: 1400px;
  perspective-origin: 50% 50%;
}
.film-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16/9;
  transform: perspective(1400px) rotateX(3deg) rotateY(-4deg);
  transform-style: preserve-3d;
  box-shadow:
    0 70px 140px rgba(0,0,0,0.55),
    0 30px 60px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 0 0 1px rgba(255,255,255,0.07);
  will-change: transform;
  cursor: ew-resize;
  transition: box-shadow 0.3s ease;
}
.film-layer {
  position: absolute;
  inset: 0;
  user-select: none;
}
.film-layer img {
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  display: block;
}
/* Before = harsh sunlight, no film */
.film-before img {
  filter: brightness(1.28) saturate(1.3) contrast(1.04);
}
/* After = solar film applied */
.film-after {
  clip-path: inset(0 50% 0 0);
}
.film-after img {
  filter: brightness(0.76) saturate(0.72) contrast(1.08) hue-rotate(200deg);
}
.film-after::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(23,59,86,0.22), rgba(23,59,86,0.08));
  pointer-events: none;
  z-index: 1;
}
/* Divider line + handle */
.film-divider {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 2px;
  background: rgba(255,255,255,0.85);
  transform: translateX(-50%);
  z-index: 20;
  cursor: ew-resize;
  user-select: none;
  touch-action: none;
}
.film-divider::before,
.film-divider::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 30%;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.5));
}
.film-divider::before { top: 0; }
.film-divider::after  { bottom: 0; transform: translateX(-50%) rotate(180deg); }
.film-handle {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 46px; height: 46px;
  background: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  box-shadow: 0 4px 24px rgba(0,0,0,0.35), 0 0 0 3px rgba(255,255,255,0.3);
  cursor: ew-resize;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  user-select: none;
}
.film-card:hover .film-handle {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 6px 30px rgba(0,0,0,0.45), 0 0 0 4px rgba(201,161,90,0.5);
}
/* Labels */
.film-badge {
  position: absolute;
  top: 1rem;
  padding: .3rem .8rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
  z-index: 15;
}
.film-badge-before {
  left: 1rem;
  background: rgba(0,0,0,0.5);
  color: rgba(255,255,255,0.85);
  backdrop-filter: blur(4px);
}
.film-badge-after {
  right: 1rem;
  background: var(--gold);
  color: var(--white);
}
/* Reflection + shine */
.film-reflection {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.07) 0%,
    transparent 35%,
    transparent 65%,
    rgba(255,255,255,0.04) 100%
  );
  pointer-events: none;
  z-index: 18;
  border-radius: inherit;
}
.film-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 19;
  opacity: 0;
  transition: opacity 0.4s;
  background: radial-gradient(
    circle at var(--sx, 50%) var(--sy, 50%),
    rgba(255,255,255,0.1) 0%,
    transparent 55%
  );
}
.film-demo-scene:hover .film-shine { opacity: 1; }
/* Drag hint */
.film-drag-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: 1.25rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  transition: opacity 0.4s;
}
.film-drag-hint.hidden { opacity: 0; pointer-events: none; }
.film-drag-hint svg { color: var(--gold); }

/* Dark section text overrides */
.film-demo-section .section-label { color: rgba(201,168,76,0.85); }
.film-demo-section h2 { color: var(--white); }
.film-demo-section p  { color: rgba(255,255,255,0.68); }
.film-demo-section .feature-body h4 { color: var(--white); }
.film-demo-section .feature-body p  { color: rgba(255,255,255,0.55); }
.film-demo-section .feature-icon {
  background: rgba(201,161,90,0.15);
}

/* ── Magnetic button (handled via JS, CSS only sets transition) ── */
.btn--gold,
.btn--navy {
  transition: transform var(--t-base), box-shadow var(--t-base), background var(--t-base);
}

/* ── Animated counter ── */
.stat-number[data-target] { transition: none; }

/* ── Slogan split section (about) ── */
.slogan-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--navy);
  font-weight: 400;
  line-height: 1.3;
  border-left: 3px solid var(--gold);
  padding-left: var(--sp-5);
  margin-block: var(--sp-6);
}
.slogan-quote em { color: var(--gold); font-style: normal; }

/* ── Stats strip overrides for new layout ── */
.stats-strip { background: var(--navy); }

/* ── Responsive film demo ── */
@media (max-width: 768px) {
  .film-card { transform: none; border-radius: var(--radius); }
  .film-demo-section .split { gap: var(--sp-10); }
}
@media (max-width: 480px) {
  .hero-slogan { font-size: 2.4rem; }
}
@media (max-width: 860px) {
  .hero-scroll-cue { display: none; }
}

/* ══════════════════════════════════════════════════════════
   DEMO VISUAL SYSTEM
   ══════════════════════════════════════════════════════════ */

/* ── Hero availability badge ── */
@keyframes avail-ring {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(2.4); opacity: 0; }
}
.avail-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(52,211,153,.4);
  animation: avail-ring 2.2s ease-out infinite;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-full);
  padding: var(--sp-2) var(--sp-5);
  margin-bottom: var(--sp-8);
  color: rgba(255,255,255,.8);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .08em;
}
.hero-badge-dot {
  position: relative;
  width: 8px; height: 8px;
  flex-shrink: 0;
}
.hero-badge-dot span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #34d399;
  z-index: 1;
}

/* ── Scroll cue ── */
.hero-scroll-cue {
  position: absolute;
  bottom: 3.5rem; /* 56px — clear of hero bottom */
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  color: rgba(255,255,255,.62);
  font-size: 0.6rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
}
.hero-scroll-cue-mouse {
  width: 28px; height: 44px;
  border-radius: 14px;
  border: 1.5px solid rgba(255,255,255,.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 7px;
  background: rgba(255,255,255,.04);
}
.hero-scroll-cue-dot {
  width: 4px; height: 10px;
  background: var(--gold);
  border-radius: 2px;
  animation: mouse-scroll 2s ease-in-out infinite;
}
@keyframes mouse-scroll {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%       { transform: translateY(8px); opacity: .35; }
}

/* ── Trust strip (navy band below hero) ── */
.trust-strip {
  background: var(--navy);
  padding-block: var(--sp-4);
}
.trust-strip-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.trust-strip-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.trust-strip-item svg { color: var(--gold); flex-shrink: 0; }

/* ── RGPD cookie banner ── */
.rgpd-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 8000;
  background: var(--navy);
  border-top: 1px solid rgba(201,168,76,.25);
  padding: var(--sp-4) var(--sp-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.rgpd-banner p {
  color: rgba(255,255,255,.75);
  font-size: var(--fs-sm);
  max-width: 700px;
  margin: 0;
}
.rgpd-banner a { color: var(--gold); text-decoration: underline; }
.rgpd-accept {
  background: var(--gold);
  color: var(--navy);
  font-weight: 700;
  font-size: var(--fs-sm);
  padding: var(--sp-2) var(--sp-6);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  white-space: nowrap;
  transition: opacity var(--t-fast);
}
.rgpd-accept:hover { opacity: .88; }

/* ── Floating CTA ring pulse ── */
@keyframes float-ring {
  0%   { box-shadow: 0 0 0 0 rgba(201,168,76,.5), 0 8px 32px rgba(201,168,76,.55); }
  70%  { box-shadow: 0 0 0 10px rgba(201,168,76,0), 0 8px 32px rgba(201,168,76,.55); }
  100% { box-shadow: 0 0 0 0 rgba(201,168,76,0), 0 8px 32px rgba(201,168,76,.55); }
}
.floating-cta { animation: float-ring 2.5s ease-out infinite; }

/* ── Hero badge mobile tel pulse ── */
@keyframes tel-pulse {
  0%,100% { opacity: 1; }
  50%      { opacity: .55; }
}
.header-tel-mobile { animation: tel-pulse 3s ease-in-out infinite; }

/* ── data-aos support (same system as .reveal) ── */
[data-aos] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .65s ease, transform .65s ease;
}
[data-aos].aos-visible {
  opacity: 1;
  transform: none;
}

/* ── About section - serif heading with gold italic ── */
.about-title em {
  font-style: italic;
  color: var(--gold);
}

/* ── Nexap footer credit ── */
.footer-nexap {
  color: rgba(201,168,76,.6);
  transition: opacity var(--t-fast);
}
.footer-nexap:hover { opacity: .8; }

/* ══════════════════════════════════════════════════════════════
   HEADER — Pill verre liquide flottant (style BLOK / taap.it)
   ══════════════════════════════════════════════════════════════ */
:root { --header-top: 10px; }

.site-header {
  top: 10px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: calc(100% - 40px) !important;
  max-width: 1280px !important;
  border-radius: 60px !important;
  background: rgba(255,255,255,0.78) !important;
  backdrop-filter: blur(22px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,0.9) !important;
  box-shadow: 0 2px 12px rgba(12,27,46,.07), 0 8px 32px rgba(12,27,46,.06) !important;
  transition: background .3s ease, box-shadow .3s ease;
}
.site-header.scrolled {
  background: rgba(255,255,255,0.96) !important;
  box-shadow: 0 4px 20px rgba(12,27,46,.10), 0 1px 4px rgba(12,27,46,.06) !important;
}
.header-inner { padding: 0 1.5rem; }

/* Logo — toujours navy sur la pill blanche */
.header-logo img { filter: none !important; }

/* NAV links — navy sur fond blanc */
.header-nav a, .nav-mega-trigger { color: var(--navy); }
.header-nav a:hover,
.header-nav a.active { color: var(--navy); background: rgba(12,27,46,.06); }
.site-header.scrolled .header-nav a { color: var(--navy); }
.site-header.scrolled .header-nav a:hover { background: rgba(12,27,46,.06); }

/* Tel */
.header-tel { color: var(--navy); }
.header-tel:hover { color: var(--gold) !important; }

/* Burger */
.burger span { background: var(--navy); }

/* ══════════════════════════════════════════════════════════════
   LOGO — PNG réel (logo-full.png)
   ══════════════════════════════════════════════════════════════ */
.header-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.header-logo img.header-logo-img {
  height: 36px;
  width: auto;
  display: block;
}
/* Masque SVG uniquement dans le header (le footer les conserve) */
.header-logo .logo-mark-svg,
.header-logo .logo-name { display: none !important; }

/* ══════════════════════════════════════════════════════════════
   DEVIS CTA dans le header
   ══════════════════════════════════════════════════════════════ */
.header-devis {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 28px;
  border-radius: 60px;
  font-size: .95rem;
  font-weight: 700;
  border: 1.5px solid rgba(201,168,76,.7);
  color: var(--gold);
  background: transparent;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  white-space: nowrap;
  text-decoration: none;
  line-height: 1;
}
.header-devis:hover {
  background: var(--gold);
  color: #fff !important;
  border-color: var(--gold) !important;
}
.site-header.scrolled .header-devis {
  border-color: var(--gold);
  color: var(--gold);
}
@media (max-width: 900px) {
  /* Mobile : masque le téléphone, garde le CTA devis visible */
  .header-tel { display: none !important; }
  .header-devis {
    display: inline-flex !important;
    font-size: .75rem;
    padding: .35rem .85rem;
  }
}

/* Footer logo */
.footer-logo {
  display: inline-block;
  line-height: 0;
}
.footer-logo-img {
  height: 44px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.88;
}

/* ══════════════════════════════════════════════════════════════
   HERO — VERSION SOMBRE (overlay navy, texte blanc)
   ══════════════════════════════════════════════════════════════ */
.hero { background: var(--navy); }
.hero-overlay {
  background: linear-gradient(
    180deg,
    rgba(8,17,30,.72) 0%,
    rgba(8,17,30,.55) 60%,
    rgba(8,17,30,.38) 100%
  ) !important;
}
.hero h1 { color: #fff !important; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.hero h1 em { color: var(--gold) !important; }
.hero-sub { color: rgba(255,255,255,.88) !important; text-shadow: 0 1px 8px rgba(0,0,0,.3); }
.hero-trust-item { color: rgba(255,255,255,.72) !important; }
.hero-badge {
  background: rgba(201,168,76,.18) !important;
  border-color: rgba(201,168,76,.4) !important;
  color: var(--gold-light) !important;
}
.hero-scroll-cue { color: rgba(255,255,255,.45) !important; }
.hero-scroll-cue-mouse {
  border-color: rgba(255,255,255,.28) !important;
  background: rgba(255,255,255,.04) !important;
}
.hero .btn--outline {
  border-color: rgba(255,255,255,.5) !important;
  color: #fff !important;
}
.hero .btn--outline:hover {
  border-color: #fff !important;
  background: rgba(255,255,255,.08) !important;
}
.hero-marquee { border-top-color: rgba(255,255,255,.08) !important; }
.hero-marquee-track span { color: rgba(255,255,255,.45) !important; }

/* ══════════════════════════════════════════════════════════════
   SCROLL TOUR — fullscreen sticky image sequence
   ══════════════════════════════════════════════════════════════ */
#tour-wrap { position: relative; height: 380vh; }
#tour-sticky {
  position: sticky;
  top: calc(var(--header-h) + var(--header-top) + 16px);
  height: min(86vh, 720px);
  overflow: hidden;
  background: #000;
  margin: 0 auto;
  max-width: 1320px;
  border-radius: 22px;
  box-shadow: 0 30px 90px rgba(12,27,46,.35);
}
.tour-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.0);
  transition: opacity 0.55s ease;
  will-change: transform, opacity;
}
#tour-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.12) 40%, transparent 70%);
  z-index: 2;
  pointer-events: none;
}
#tour-ui {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 3;
  padding: 2.5rem 2.5rem 2rem;
}
#tour-top-badge {
  position: absolute;
  top: calc(var(--header-h) + var(--header-top) + 16px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,0,0,.38);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: .4rem 1.2rem;
  white-space: nowrap;
  z-index: 4;
}
#tour-top-badge-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
  animation: tour-dot-blink 1.8s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes tour-dot-blink {
  0%,100% { opacity: 1; }
  50%      { opacity: .3; }
}
#tour-top-badge-text {
  color: rgba(255,255,255,.75);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
#tour-room-num {
  color: rgba(255,255,255,.45);
  font-size: .75rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  margin-bottom: .5rem;
  transition: opacity .4s ease;
}
#tour-room-label {
  font-family: var(--font-serif);
  font-size: clamp(2.6rem, 6vw, 5.2rem);
  color: #fff;
  font-weight: 300;
  line-height: 1.05;
  margin-bottom: .4rem;
  transition: opacity .4s ease, transform .4s ease;
}
#tour-room-detail {
  color: rgba(255,255,255,.6);
  font-size: .9rem;
  letter-spacing: .03em;
  transition: opacity .4s ease;
}
.tour-progress {
  display: flex;
  gap: 6px;
  margin-top: 1.5rem;
}
.tour-seg {
  height: 2px;
  flex: 1;
  background: rgba(255,255,255,.2);
  border-radius: 2px;
  transition: background .3s ease;
}
.tour-seg.active { background: var(--gold); }
#tour-skip {
  position: absolute;
  bottom: 2.2rem;
  right: 2.5rem;
  color: rgba(255,255,255,.45);
  font-size: .75rem;
  text-decoration: none;
  letter-spacing: .05em;
  transition: color .2s;
}
#tour-skip:hover { color: rgba(255,255,255,.75); }
@media (max-width: 640px) {
  /* +padding bas : le texte au défilé ne passe plus sous la barre fixe (assistant / Devis) */
  #tour-ui { padding: 1.5rem 1.2rem 4.5rem; }
  #tour-room-label { font-size: clamp(2rem,8vw,2.8rem); }
}

@media (max-width: 640px) {
  /* Overlay sombre sur mobile : photo visible, texte blanc parfaitement lisible */
  .hero-overlay {
    background: linear-gradient(
      180deg,
      rgba(8,17,30,.72) 0%,
      rgba(8,17,30,.55) 60%,
      rgba(8,17,30,.38) 100%
    ) !important;
  }

  /* Texte en blanc sur mobile (overlay sombre) */
  .hero h1      { color: #fff !important; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
  .hero h1 em   { color: var(--gold) !important; }
  .hero-sub     { color: rgba(255,255,255,.88) !important; font-size: var(--fs-base); text-shadow: 0 1px 8px rgba(0,0,0,.3); }
  .hero-trust-item { color: rgba(255,255,255,.78) !important; font-size: .78rem; }

  /* Badges trust : 3 en ligne, centrés */
  .hero-trust {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-2) var(--sp-4);
  }

  /* Bouton outline adapté au fond sombre */
  .hero .btn--outline {
    border-color: rgba(255,255,255,.5) !important;
    color: #fff !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   ESPACEMENT — Sections plus aérées
   ══════════════════════════════════════════════════════════════ */
.stats-strip   { padding-block: clamp(4rem, 8vw, 7rem) !important; }
.solutions     { padding-block: clamp(5rem, 9vw, 8rem) !important; }
.process       { padding-block: clamp(5rem, 9vw, 8rem) !important; }
.realisations  { padding-block: clamp(5rem, 9vw, 8rem) !important; }
.about-section { padding-block: clamp(5rem, 9vw, 8rem) !important; }
.cta-section   { padding-block: clamp(5rem, 9vw, 8rem) !important; }
section        { margin-block: 0 !important; }

/* ══════════════════════════════════════════════════════════════
   FONT — Hero slogan : Manrope bold (override Cormorant)
   ══════════════════════════════════════════════════════════════ */
.hero-slogan {
  font-family: var(--font-head) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.08 !important;
  font-style: normal !important;
}
.hero-slogan em {
  font-family: var(--font-head) !important;
  font-style: normal !important;
  font-weight: 800 !important;
}

/* ══════════════════════════════════════════════════════════════
   HERO — CENTRÉ (style taap.it)
   ══════════════════════════════════════════════════════════════ */
.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero h1 {
  max-width: 22ch;
  font-weight: 800;
  letter-spacing: -0.025em;
}
.hero-sub {
  margin-inline: auto;
  text-align: center;
}
.hero-ctas { justify-content: center; }
.hero-trust { justify-content: center; }
.hero-badge { margin-inline: auto; }
.hero-scroll-cue { left: 50%; transform: translateX(-50%); }

/* ══════════════════════════════════════════════════════════════
   MEGA-MENU — Nos solutions — panneaux photo horizontaux
   ══════════════════════════════════════════════════════════════ */
.nav-mega-wrap {
  position: relative;
}
.nav-mega-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--navy);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  transition: color var(--t-fast), background var(--t-fast);
  white-space: nowrap;
  text-decoration: none;
}
.nav-mega-trigger:hover { background: rgba(12,27,46,.07); }
.nav-mega-trigger svg.chevron {
  transition: transform .2s ease;
  flex-shrink: 0;
}
.nav-mega-wrap.open .nav-mega-trigger svg.chevron { transform: rotate(180deg); }

/* Panel itself — positioned below the floating pill */
.mega-menu {
  position: fixed;
  top: calc(var(--header-top, 10px) + var(--header-h, 64px) + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: min(1140px, 100vw - 40px);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(12,27,46,.22), 0 2px 8px rgba(12,27,46,.10);
  z-index: 1100;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  pointer-events: none;
}
.nav-mega-wrap.open .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* Image panels row */
.mega-panels {
  display: flex;
  height: 210px;
}
/* Grid variant — for menus with more than ~6 entries (ex. Nos secteurs) */
.mega-panels--grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  height: auto;
  background: rgba(255,255,255,.15);
}
.mega-panels--grid .mega-panel { height: 130px; flex: none; }
.mega-panels--grid .mega-panel::before { display: none; }
@media (max-width: 1040px) {
  .mega-panels--grid { grid-template-columns: repeat(4, 1fr); }
}
.mega-panel {
  flex: 1;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  transition: flex .35s cubic-bezier(.4,0,.2,1);
  cursor: pointer;
  min-width: 0;
}
.mega-panel:hover { flex: 1.55; }
.mega-panel-img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform .45s ease;
}
.mega-panel:hover .mega-panel-img { transform: scale(1.07); }
.mega-panel::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,17,30,.75) 0%, rgba(8,17,30,.25) 55%, rgba(8,17,30,.10) 100%);
  transition: background .3s ease;
  pointer-events: none;
}
.mega-panel:hover::after {
  background: linear-gradient(to top, rgba(8,17,30,.85) 0%, rgba(8,17,30,.35) 55%, rgba(8,17,30,.05) 100%);
}
.mega-panel-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 12px 8px;
  text-align: center;
  color: #fff;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  z-index: 1;
  line-height: 1.3;
  transition: padding .35s ease;
}
.mega-panel:hover .mega-panel-label { padding-bottom: 16px; }
/* Thin separator between panels */
.mega-panel + .mega-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 100%;
  background: rgba(255,255,255,.15);
  z-index: 2;
  pointer-events: none;
}

@media (max-width: 900px) { .mega-menu { display: none; } }

/* ═══ Assistant PrivTeint — guidage sans API ═══ */
/* Barre « Comment puis-je vous aider ? » : verre transparent (texte blanc lisible sur tout fond).
   Toute la barre est cliquable → ouvre la pop-up (plus de bouton flèche). */
.pt-ai-bar{ position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:9990; display:flex; align-items:center; gap:.5rem; width:min(520px, calc(100% - 28px)); background:rgba(12,27,46,.42); border:1px solid rgba(255,255,255,.24); border-radius:999px; padding:.55rem 1.15rem; box-shadow:0 14px 40px rgba(8,17,30,.4), inset 0 1px 1px rgba(255,255,255,.14); -webkit-backdrop-filter:blur(16px) saturate(180%); backdrop-filter:blur(16px) saturate(180%); cursor:pointer; }
.pt-ai-bar .pt-ai-ic{ color:rgba(255,255,255,.72); flex-shrink:0; display:flex; }
.pt-ai-bar input{ flex:1; min-width:0; background:none; border:0; color:#fff; font-size:.92rem; padding:.4rem 0; cursor:pointer; }
.pt-ai-bar input::placeholder{ color:rgba(255,255,255,.72); opacity:1; }
.pt-ai-bar input:focus{ outline:none; }
.pt-ai-spark{ color:#C9A84C; }
.pt-ai-overlay{ position:fixed; inset:0; z-index:10000; display:flex; align-items:flex-end; justify-content:center; background:rgba(8,15,26,.42); -webkit-backdrop-filter:blur(8px) saturate(150%); backdrop-filter:blur(8px) saturate(150%); opacity:0; transition:opacity .25s ease; }
.pt-ai-overlay.show{ opacity:1; }
.pt-ai-overlay[hidden]{ display:none; }
/* Panneau = verre translucide (même esprit que le header) mais assez dense pour rester lisible */
.pt-ai-panel{ width:min(440px,96vw); max-height:82vh; display:flex; flex-direction:column; background:rgba(255,255,255,.66); -webkit-backdrop-filter:blur(22px) saturate(180%); backdrop-filter:blur(22px) saturate(180%); border:1px solid rgba(255,255,255,.5); border-radius:20px 20px 0 0; box-shadow:0 -20px 60px rgba(0,0,0,.4); transform:translateY(24px); transition:transform .3s ease; overflow:hidden; }
.pt-ai-overlay.show .pt-ai-panel{ transform:translateY(0); }
@media (min-width:600px){ .pt-ai-overlay{ align-items:center; } .pt-ai-panel{ border-radius:20px; } }
.pt-ai-head{ display:flex; align-items:center; justify-content:space-between; padding:1rem 1.25rem; background:rgba(12,27,46,.62); color:#fff; flex-shrink:0; }
.pt-ai-title{ font-weight:800; font-size:.98rem; display:flex; align-items:center; gap:.4rem; }
.pt-ai-close{ background:none; border:0; color:rgba(255,255,255,.7); font-size:1.1rem; cursor:pointer; padding:.2rem .4rem; line-height:1; }
.pt-ai-close:hover{ color:#fff; }
.pt-ai-body{ flex:1; overflow-y:auto; padding:1.1rem 1.25rem; display:flex; flex-direction:column; gap:.7rem; background:transparent; }
.pt-ai-msg{ max-width:88%; padding:.7rem .95rem; border-radius:14px; font-size:.9rem; line-height:1.5; }
.pt-ai-msg--bot{ align-self:flex-start; background:#fff; color:#0C1B2E; box-shadow:0 2px 8px rgba(12,27,46,.08); }
.pt-ai-msg--user{ align-self:flex-end; background:#0C1B2E; color:#fff; }
.pt-ai-cta{ display:inline-flex; align-items:center; gap:.35rem; margin-top:.5rem; font-weight:700; color:#a5842f; text-decoration:none; font-size:.85rem; }
.pt-ai-cta:hover{ text-decoration:underline; }
.pt-ai-chips{ display:flex; flex-wrap:wrap; gap:.4rem; padding:.7rem 1.25rem; background:transparent; border-top:1px solid rgba(12,27,46,.1); max-height:34%; overflow-y:auto; flex-shrink:0; }
.pt-ai-chip{ background:rgba(255,255,255,.72); border:1px solid rgba(12,27,46,.18); color:#0C1B2E; border-radius:999px; padding:.4rem .8rem; font-size:.8rem; cursor:pointer; transition:border-color .2s, background .2s; }
.pt-ai-chip:hover{ border-color:#C9A84C; background:rgba(201,168,76,.14); }
.pt-ai-search{ display:flex; gap:.5rem; padding:.75rem 1.25rem 1rem; background:transparent; border-top:1px solid rgba(12,27,46,.1); flex-shrink:0; }
.pt-ai-search input{ flex:1; min-width:0; border:1.5px solid rgba(12,27,46,.2); border-radius:999px; padding:.65rem 1rem; font-size:.9rem; background:rgba(255,255,255,.7); }
.pt-ai-search input:focus{ outline:none; border-color:#C9A84C; }
.pt-ai-search button{ flex-shrink:0; width:42px; height:42px; border:0; border-radius:50%; background:#C9A84C; color:#0C1B2E; font-size:1.15rem; font-weight:800; cursor:pointer; }
.pt-mobile-devis{ display:none; }
@media (max-width:900px){
  .header-devis{ display:none !important; }
  .pt-mobile-devis{ display:inline-flex; align-items:center; gap:.4rem; position:fixed; right:12px; bottom:14px; z-index:9991; background:#C9A84C; color:#0C1B2E; font-weight:800; font-size:.92rem; padding:.72rem 1.2rem; border-radius:999px; box-shadow:0 10px 30px rgba(201,168,76,.5); text-decoration:none; }
  .pt-mobile-devis:hover{ filter:brightness(1.05); }
  .pt-ai-bar{ left:12px; right:auto; transform:none; width:min(62%, 320px); bottom:14px; padding:.4rem 1rem; }
  .pt-ai-bar input{ font-size:.82rem; }
}
@media (max-width:599px){
  .pt-ai-overlay{ align-items:stretch; }
  .pt-ai-panel{ width:100%; max-height:100%; height:100%; border-radius:0; }
}
/* ═══ Cookies : la banniere passe au-dessus et masque chatbot/Devis/panier tant qu'elle est la ═══ */
.rgpd-banner{ z-index:9995 !important; }
body.rgpd-open .pt-ai-bar,
body.rgpd-open .pt-mobile-devis,
body.rgpd-open .pt-fab{ opacity:0 !important; visibility:hidden !important; pointer-events:none !important; }
/* ═══ Header : rétrécit de 20% au scroll (desktop + mobile) ═══ */
.site-header{ transition: height .3s ease, background var(--t-base,.25s), box-shadow var(--t-base,.25s), border-color .3s; }
.site-header.scrolled{ height: calc(var(--header-h) * 0.8); }

/* ═══ Menu mobile ouvert : cacher chatbot + Devis flottant ═══ */
body.menu-open .pt-ai-bar,
body.menu-open .pt-mobile-devis{ display:none !important; }

/* ═══ Logo -> bouton « Devis gratuit » animé quand le menu est ouvert ═══ */
.header-menu-devis{ display:none; }
.header-menu-logo{ display:none; }
body.menu-open .header-logo{ display:none; }
/* Menu ouvert : logo icône à gauche, « Devis gratuit » centré, croix à droite */
body.menu-open .header-menu-logo{ display:block; width:36px; height:36px; flex-shrink:0; object-fit:contain; filter:brightness(0) invert(1); }
body.menu-open .header-menu-devis{ display:inline-flex; align-items:center; gap:.4rem; margin-inline:auto; white-space:nowrap; background:var(--gold,#C9A84C); color:var(--navy,#0C1B2E); font-weight:800; font-size:.95rem; padding:.6rem 1.15rem; border-radius:999px; text-decoration:none; box-shadow:0 6px 20px rgba(201,168,76,.45); }
/* Flou autour du menu ouvert (le fond de la page est flouté) */
body.menu-open::before{ content:''; position:fixed; inset:0; z-index:998; background:rgba(8,15,26,.28); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
/* Numéro de téléphone en bas du menu (blanc, même police) */
.mnav-phone{ display:flex; align-items:center; gap:.55rem; color:#fff !important; font-weight:700; font-size:1.02rem; padding:.5rem 1.15rem 1rem !important; text-decoration:none; border:0 !important; margin-top:0; }
.mnav-phone svg{ color:var(--gold-light,#e6cf8f); flex-shrink:0; }
.mnav-phone:hover{ color:var(--gold-light,#e6cf8f) !important; background:transparent !important; }
.mnav-sim svg{ color:var(--gold-light,#e6cf8f); flex-shrink:0; }

/* ═══ Menu mobile — liste épurée « Apple », verre translucide ═══ */
.mobile-nav{ background:rgba(12,22,38,.42) !important; -webkit-backdrop-filter:blur(32px) saturate(190%) !important; backdrop-filter:blur(32px) saturate(190%) !important; border:1px solid rgba(255,255,255,.12) !important; box-shadow:0 20px 60px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.14) !important; padding:.25rem .5rem !important; border-radius:24px !important; }
/* Séparateurs hairline UNIFORMES entre chaque entrée, aucun après la dernière (comme une liste iOS) */
.mobile-nav > *{ border-top:0 !important; }
.mobile-nav > *:not(:last-child){ border-bottom:1px solid rgba(255,255,255,.08) !important; }
.mnav-group{ border-radius:0; }
.mnav-head{ width:100%; display:flex; align-items:center; justify-content:space-between; background:none; border:0; color:#fff; font-weight:600; font-size:1.05rem; letter-spacing:-.01em; padding:1.1rem 1.05rem; cursor:pointer; text-align:left; font-family:inherit; }
.mnav-head .mnav-chev{ transition:transform .3s ease; color:var(--gold-light,#e6cf8f); flex-shrink:0; opacity:.85; }
.mnav-group.open .mnav-head{ color:var(--gold-light,#e6cf8f); }
.mnav-group.open .mnav-head .mnav-chev{ transform:rotate(180deg); }
.mnav-sub{ max-height:0; overflow:hidden; transition:max-height .38s cubic-bezier(.4,0,.2,1); }
.mnav-group.open .mnav-sub{ max-height:560px; padding-bottom:.35rem; }
.mnav-sub a{ display:block; color:rgba(255,255,255,.78); font-size:.95rem; padding:.6rem 1.05rem .6rem 1.5rem; text-decoration:none; border-radius:10px; }
.mnav-sub a:hover, .mnav-sub a:active{ color:#fff; background:rgba(255,255,255,.08); }
/* Entrées simples (Réalisations, Simulateur, Téléphone) : même gabarit propre, poids medium */
.mnav-link, .mnav-sim, .mnav-phone{ display:flex; align-items:center; gap:.6rem; color:#fff !important; font-weight:600 !important; font-size:1.05rem !important; letter-spacing:-.01em; padding:1.1rem 1.05rem !important; text-decoration:none; }
.mnav-link:hover, .mnav-link:active, .mnav-sim:hover, .mnav-sim:active, .mnav-phone:hover, .mnav-phone:active{ color:var(--gold-light,#e6cf8f) !important; background:transparent !important; }
/* ═══ Compteur « Devis » + suppression du doublon « Mon devis » (panier flottant) ═══ */
.pt-fab, .pt-mini{ display:none !important; }
.header-devis{ display:inline-flex; align-items:center; }
.devis-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:19px; height:19px; padding:0 5px; margin-left:.45rem; background:var(--navy,#0C1B2E); color:#fff; font-size:.72rem; font-weight:800; border-radius:999px; line-height:1; font-variant-numeric:tabular-nums; }
/* ═══ Fix debordement horizontal reel (iOS) — clip sans casser le scroll GSAP ═══ */
html{ overflow-x:clip; }
body{ overflow-x:clip; }
/* Hero : cacher l'assistant + le CTA Devis flottant tant qu'on voit le hero */
body.at-hero .pt-ai-bar,
body.at-hero .pt-mobile-devis{ display:none !important; }
/* Assistant IA (« parler à l'agent ») : visible aussi sur ordinateur, centré en bas */
@media (min-width:901px){ .pt-ai-bar{ width:min(460px, calc(100% - 40px)); bottom:22px; } }
/* Au niveau du footer (mobile) : pas de Devis flottant ni d'assistant */
body.at-footer .pt-ai-bar,
body.at-footer .pt-mobile-devis{ display:none !important; }
/* Badge avis Trustindex — footer aligné à gauche (pro) */
.footer-ti{ display:flex; justify-content:flex-start; align-items:flex-start; text-align:left; }
.footer-ti > *{ margin-left:0 !important; margin-right:auto !important; }
/* Badge avis « liquid glass » du hero (visuel sur mesure ; avis live dans la section Avis) */
.hero-rating{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.5rem 1.05rem; border-radius:999px;
  font-size:.85rem; color:#fff; text-decoration:none; white-space:nowrap;
  background:linear-gradient(135deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.10) 45%, rgba(255,255,255,.18) 100%);
  -webkit-backdrop-filter:blur(16px) saturate(180%); backdrop-filter:blur(16px) saturate(180%);
  border:1px solid rgba(255,255,255,.42);
  box-shadow:0 10px 30px rgba(0,0,0,.28), inset 0 1px 1px rgba(255,255,255,.6), inset 0 -6px 16px rgba(255,255,255,.08);
  transition:transform .2s ease, box-shadow .2s ease;
}
.hero-rating:hover{ transform:translateY(-1px); box-shadow:0 14px 38px rgba(0,0,0,.34), inset 0 1px 1px rgba(255,255,255,.72), inset 0 -6px 16px rgba(255,255,255,.1); }
.hero-rating-label{ font-weight:800; letter-spacing:.09em; text-transform:uppercase; font-size:.72rem; }
.hero-rating-stars{ color:#FFC83D; letter-spacing:.05em; font-size:.92rem; text-shadow:0 1px 2px rgba(0,0,0,.25); }
.hero-rating-score{ font-weight:800; }
.hero-rating-sep{ opacity:.45; }
.hero-rating-count{ opacity:.9; font-weight:500; }
@media (max-width:560px){
  .hero-rating{ font-size:.78rem; gap:.45rem; padding:.44rem .9rem; }
  .hero-rating-label{ font-size:.66rem; }
  .hero-rating-stars{ font-size:.84rem; }
}

/* ═══ Ajustements mobile (CTA, FAQ, barre assistant) ═══ */
@media (max-width:600px){
  /* Les CTA en page ne doivent pas être plus gros que le bouton Devis flottant */
  .btn--lg{ padding:.72rem 1.4rem !important; font-size:.92rem !important; }
  /* FAQ : questions + bouton dérouler ~30 % plus petits */
  .accordion-trigger{ font-size:.78rem !important; padding:.85rem .95rem !important; gap:.6rem !important; }
  .accordion-icon{ width:22px !important; height:22px !important; }
  .accordion-body-inner{ font-size:.82rem !important; }
  .accordion-body-inner p{ font-size:.82rem !important; }
  /* Barre « Comment puis-je vous aider » et bouton Devis : même hauteur (largeur inchangée) */
  .pt-ai-bar{ height:52px; box-sizing:border-box; }
  .pt-mobile-devis{ height:52px; box-sizing:border-box; padding-top:0; padding-bottom:0; }
}
/* Grilles forcées à 4 colonnes en inline : elles ne se repliaient pas sur mobile
   (le style inline écrase la règle responsive) → colonnes empilées, plus de « tours » de texte */
@media (max-width:760px){
  [style*="grid-template-columns:repeat(4"]{ grid-template-columns:1fr 1fr !important; }
}
@media (max-width:520px){
  [style*="grid-template-columns:repeat(4"]{ grid-template-columns:1fr !important; }
}
/* Grands blocs texte|image en 2 colonnes (gap 4rem) : empiler sur mobile pour aérer */
@media (max-width:680px){
  [style*="grid-template-columns:1fr 1fr"][style*="gap:4rem"]{ grid-template-columns:1fr !important; gap:2rem !important; }
}
/* Pages légales : lignes label / valeur — empiler sur mobile (le label 200px écrasait la valeur) */
@media (max-width:600px){
  .info-row{ flex-direction:column !important; align-items:flex-start !important; gap:.15rem !important; }
  .info-row > span[style*="min-width:200px"],
  .info-row > span:first-child{ min-width:0 !important; display:block !important; }
}

/* ═══ Header « liquid glass » (même verre que le badge avis) ═══ */
.site-header{
  background:linear-gradient(135deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.07) 45%, rgba(255,255,255,.15) 100%) !important;
  -webkit-backdrop-filter:blur(14px) saturate(170%) !important;
  backdrop-filter:blur(14px) saturate(170%) !important;
  border:1px solid rgba(255,255,255,.30) !important;
  box-shadow:0 8px 32px rgba(8,17,30,.24), inset 0 1px 1px rgba(255,255,255,.42) !important;
}
/* Sur le hero (non défilé) : texte + logo clairs, lisibles sur le verre transparent */
.site-header:not(.scrolled) .header-nav a,
.site-header:not(.scrolled) .nav-mega-trigger,
.site-header:not(.scrolled) .header-tel,
.site-header:not(.scrolled) .header-tel a,
.site-header:not(.scrolled) .header-tel svg{ color:#fff !important; }
.site-header:not(.scrolled) .header-nav a:hover,
.site-header:not(.scrolled) .header-nav a.active,
.site-header:not(.scrolled) .nav-mega-trigger:hover{ background:rgba(255,255,255,.15) !important; color:#fff !important; }
.site-header:not(.scrolled) .header-logo img{ filter:brightness(0) invert(1) !important; }
.site-header:not(.scrolled) .burger span{ background:#fff !important; }
/* Le déroulé « À propos » a un fond BLANC : garder son texte foncé même quand le header
   est en mode clair (sinon libellés blancs invisibles sur fond blanc → menu qui semble cassé). */
.site-header:not(.scrolled) .mega-menu--compact a,
.site-header:not(.scrolled) .mega-list a,
.site-header:not(.scrolled) .mega-list a strong{ color:var(--navy) !important; }
.site-header:not(.scrolled) .mega-list a span{ color:var(--text-muted) !important; }
.site-header:not(.scrolled) .mega-menu--compact a:hover{ background:rgba(12,27,46,.06) !important; }
/* Défilé : on GARDE le même verre transparent qu'en haut (plus de pastille opaque),
   juste assez dense pour rester lisible (texte navy) sur le contenu clair.
   La taille continue de rétrécir (voir .site-header.scrolled height plus bas). */
.site-header.scrolled{
  background:linear-gradient(135deg, rgba(255,255,255,.44) 0%, rgba(255,255,255,.26) 45%, rgba(255,255,255,.38) 100%) !important;
  border-color:rgba(255,255,255,.30) !important;
  box-shadow:0 6px 26px rgba(8,17,30,.16), inset 0 1px 1px rgba(255,255,255,.42) !important;
}
.site-header.scrolled .header-logo img{ filter:none !important; }
/* Bouton Devis (ordinateur) : fond doré plein, hero comme défilé */
.header-devis{ background:var(--gold,#C9A84C) !important; color:#fff !important; border-color:var(--gold,#C9A84C) !important; }
.header-devis:hover{ filter:brightness(1.06); }