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

/* ── Google Fonts ── */
/* Pas d'import distant : Inter, Manrope, Cormorant Garamond,
   Playfair Display et General Sans sont auto-hébergées dans
   assets/fonts/ et déclarées par fonts.css, chargé juste avant.
   L'import Google faisait doublon — et sa bascule `display=swap`
   décalait le hero plusieurs secondes après l'affichage. */

/* ── 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', 'Inter secours', system-ui, sans-serif;
  --font-head:  'Manrope', 'Manrope secours', 'Inter', system-ui, sans-serif;
  --font-serif: 'Cormorant Garamond', 'Cormorant Garamond secours', 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;
  max-width: 100%;
}
@media (max-width: 640px) { .btn { white-space: normal; } }
.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);
}
.skip-link {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100000;
  background: var(--navy, #0C1B2E);
  color: #fff;
  padding: .7rem 1.1rem;
  border-radius: 0 0 8px 0;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-130%);
  transition: transform .18s ease;
}
.skip-link:focus { transform: translateY(0); outline: 2px solid var(--gold, #C9A84C); }

.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 ── */
/* ══════════════════════════════════════════════════════════
   CONSENTEMENT
   Carte claire en bas d'écran, deux réponses de MÊME poids.
   Un « Rejeter » plus discret que le « Accepter » rendrait le
   consentement discutable : la loi demande que refuser coûte le
   même geste qu'accepter, et c'est aussi la seule façon d'obtenir
   une réponse qui veuille dire quelque chose.
   ══════════════════════════════════════════════════════════ */
.rgpd-banner {
  position: fixed;
  inset: auto 0 0;
  z-index: 8000;
  padding: 16px clamp(16px, 4vw, 40px) max(16px, env(safe-area-inset-bottom));
}
.rgpd-in {
  max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; gap: 30px; flex-wrap: wrap;
  padding: 22px 26px;
  background: #F4F5F7;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 14px;
  box-shadow: 0 14px 46px rgba(6,12,22,.42);
}
.rgpd-txt { flex: 1 1 380px; min-width: 0; }
.rgpd-txt strong {
  display: block; font-size: 17px; font-weight: 700; color: #16181C; letter-spacing: -.01em;
}
.rgpd-banner p {
  margin: 7px 0 0;
  font-size: 13.5px; line-height: 1.55; color: #4A5058; max-width: 82ch;
}
.rgpd-banner p b { color: #16181C; font-weight: 600; }
.rgpd-banner a { color: #16181C; text-decoration: underline; text-underline-offset: 2px; }
.rgpd-actions { display: flex; gap: 12px; flex: 0 0 auto; }
.rgpd-accept, .rgpd-refuse {
  min-width: 132px; padding: 12px 24px;
  font-size: 14px; font-weight: 600; font-family: inherit;
  border-radius: 8px; cursor: pointer; white-space: nowrap;
  transition: background .16s ease;
}
.rgpd-accept { background: #16181C; color: #fff; border: 1px solid #16181C; }
.rgpd-accept:hover { background: #303338; }
.rgpd-refuse { background: #fff; color: #16181C; border: 1px solid rgba(0,0,0,.22); }
.rgpd-refuse:hover { background: #E9EBEE; }
@media (max-width: 760px) {
  .rgpd-in { padding: 18px; gap: 16px; }
  .rgpd-actions { width: 100%; }
  .rgpd-accept, .rgpd-refuse { flex: 1; min-width: 0; }
}
/* ── 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);
  /* Remplit l'espace entre le header et la barre assistant (~110px) — supprime le vide gris sur grand écran */
  height: min(88vh, calc(100dvh - var(--header-h) - var(--header-top) - 126px));
  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.18s linear;
  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 3.2rem 2.2rem;
  text-align: center;
}
#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 {
  position: absolute;
  right: 1.4rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 4;
}
.tour-seg {
  width: 3px;
  height: 26px;
  background: rgba(255,255,255,.25);
  border-radius: 3px;
  transition: background .3s ease;
}
.tour-seg.active { background: var(--gold); }
#tour-scrollcue {
  position: absolute;
  right: 1.05rem;
  bottom: 1.5rem;
  z-index: 4;
  color: rgba(255,255,255,.8);
  animation: tour-bounce 1.6s ease-in-out infinite;
  transition: opacity .5s ease;
  pointer-events: none;
}
#tour-sticky.tour-scrolled #tour-scrollcue { opacity: 0; }
@keyframes tour-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
@media (prefers-reduced-motion: reduce) { #tour-scrollcue { animation: none; } }
#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; }
  /* ── La barre d'action du bas ─────────────────────────────
     Mesure sur 8 jours : l'assistant occupait 242 px pour 0 clic,
     le bouton devis 102 px pour 5 clics sur 4 pages. On rend la
     largeur a ce qui sert. L'assistant reste la, en icone.
     Les pages font vingt ecrans et se lisent au tiers : l'action
     doit rester sous le pouce en permanence. */
  .pt-mobile-devis{
    display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
    position:fixed; left:76px; right:12px; bottom:14px;
    bottom:calc(14px + env(safe-area-inset-bottom));
    z-index:9991; background:#C9A84C; color:#0C1B2E;
    font-weight:800; font-size:.98rem; padding:.85rem 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-mobile-devis:active{ transform:scale(.985); }
  .pt-mobile-devis svg{ flex:0 0 auto; }

  /* L'assistant : une pastille, plus une barre. */
  .pt-ai-bar{
    left:12px; right:auto; transform:none;
    width:52px; height:52px; min-width:0;
    bottom:14px; bottom:calc(14px + env(safe-area-inset-bottom));
    padding:0; justify-content:center; border-radius:50%;
  }
  .pt-ai-bar input{ display:none; }
  .pt-ai-bar .pt-ai-ic{ color:rgba(255,255,255,.9); }
}
@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, téléphone seulement : cacher l'assistant + le CTA Devis flottant
   tant qu'on voit le hero — la version mobile du hero a déjà son propre
   bouton devis inline (.hero-cta-mob), les deux se superposeraient.
   Sur ordinateur, les deux restent visibles dès le hero (voir plus bas) :
   c'est le seul CTA flottant, rien avec quoi il ferait doublon. */
@media (max-width:900px){
  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 */
/* Ordinateur : l'assistant quitte le centre pour le coin bas
   droite. Le centre etait le seul point fixe de la page et y
   restait sur toute la hauteur.
   ⚠ Ce coin appartient sur le papier a .pt-fab (« Mon devis »,
   right:18px bottom:18px dans v2.css), mais celui-ci est
   neutralise plus bas dans cette feuille — « suppression du
   doublon Mon devis », le compteur de l'en-tete l'ayant remplace.
   Si .pt-fab est un jour reactive, les deux se superposeront.
   Sept pages ont ete balayees avant ce changement : la barre ne
   masquait aucun bouton. Ce n'est donc pas un correctif, c'est de
   la place rendue au contenu. */
@media (min-width:901px){
  .pt-ai-bar{
    right:24px; left:auto; transform:none;
    width:min(300px, calc(100% - 48px)); bottom:22px;
    transition:width .25s ease, background-color .25s ease;
  }
  /* Discrete au repos, lisible des qu'on s'y interesse. */
  .pt-ai-bar:hover, .pt-ai-bar:focus-within{
    width:min(390px, calc(100% - 48px));
    background:rgba(12,27,46,.62);
  }
  /* « Obtenir un devis » flottant, ordinateur : centré en bas, même
     élément et même lien que la version téléphone (.pt-mobile-devis,
     display:none par défaut hors de son propre @media ≤900px — on le
     réactive ici avec sa propre position). Couleur CTA (or plein),
     seul repère doré fixe de la page. */
  .pt-mobile-devis{
    display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
    position:fixed; left:50%; right:auto; bottom:22px; transform:translateX(-50%);
    z-index:9991; background:var(--gold,#C9A84C); color:var(--navy,#0C1B2E);
    font-weight:800; font-size:.95rem; padding:.85rem 1.5rem;
    border-radius:999px; box-shadow:0 10px 30px rgba(201,168,76,.4);
    text-decoration:none; transition:filter .2s ease, transform .2s ease;
  }
  .pt-mobile-devis:hover{ filter:brightness(1.06); }
  .pt-mobile-devis:active{ transform:translateX(-50%) scale(.985); }
  .pt-mobile-devis svg{ flex:0 0 auto; }
}
@media (min-width:901px) and (prefers-reduced-motion:reduce){
  .pt-ai-bar{ transition:none; }
}
/* 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;
}
/* Logo BLANC en permanence, ordinateur compris (demande de Mathys, 08/10) :
   le header défilé reste navy translucide (v2.css rgba(8,17,30,.55)),
   le logo navy d'origine y était quasi invisible. */
.site-header.scrolled .header-logo img{ filter:brightness(0) invert(1) !important; }
/* Téléphone : le logo reste BLANC en permanence. Au scroll, la règle
   ci-dessus lui rendait ses couleurs d'origine (sombres) alors que le
   fond du header reste navy translucide (v2.css : rgba(8,17,30,.55))
   — soit sombre sur sombre, logo illisible. Sur ordinateur le header
   dispose de plus de contraste, on n'y touche pas. */
@media (max-width: 900px) {
  .site-header .header-logo img,
  .site-header.scrolled .header-logo img { filter: brightness(0) invert(1) !important; }
}
/* Bouton Devis (ordinateur) : discret, contour + texte or sur fond
   transparent — même logique que la barre assistant (.pt-ai-bar) —
   plutôt que le fond doré plein d'origine. Le survol reste le seul
   moment où il se remplit. */
.header-devis{ background:rgba(255,255,255,.06) !important; color:var(--gold,#C9A84C) !important; border-color:rgba(201,168,76,.65) !important; }
.header-devis:hover{ background:var(--gold,#C9A84C) !important; color:#fff !important; border-color:var(--gold,#C9A84C) !important; }
.site-header.scrolled .header-devis{ background:rgba(12,27,46,.05) !important; }

/* ══════════════════════════════════════════════════════════════
   ÉCHELLE TÉLÉPHONE
   Presque tout le trafic arrive d'un téléphone. Les tailles
   ci-dessous ne sont pas « la version réduite » du bureau : ce sont
   les tailles de référence, et le bureau est la variante.

   Placé en fin de feuille à dessein — les règles de base plus haut
   ont la même spécificité, et c'est la dernière déclarée qui gagne.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {

  /* ── Titres ─────────────────────────────────────────────── */
  h2, .section-title          { font-size: 1.36rem !important; line-height: 1.2;  letter-spacing: -.018em; }
  /* Après les h2, et en nommant le cas où un h1 porte aussi la classe
     de titre de section — sinon il hérite de la taille des h2. */
  /* .hero-h1 est le titre de référencement du carrousel, volontairement
     discret : il nomme l'activité et la ville au-dessus du slogan, qui
     reste le message visuel. Sans cette exception il héritait de 1,72rem
     et écrasait la promesse qu'il est censé introduire. */
  h1:not(.hero-h1), .hero h1:not(.hero-h1), .page-hero h1,
  h1.section-title            { font-size: 1.72rem !important; line-height: 1.14; letter-spacing: -.022em; }
  /* Le héros de l'accueil porte la promesse : +10 % sur lui seul. */
  #hero h1:not(.hero-h1), .hero h1.hero-slogan { font-size: 1.89rem !important; line-height: 1.12; }
  h3                          { font-size: 1.06rem !important; line-height: 1.3; }
  h4                          { font-size: .96rem  !important; }

  /* Le sur-titre doré : il annonce, il ne crie pas. */
  .section-label, .page-hero-label { font-size: .68rem !important; letter-spacing: .13em; }

  /* ── Texte courant ──────────────────────────────────────── */
  body { font-size: .95rem; }
  main p, section p, .article p, .lead, .hero p, .page-hero p,
  .info-card p, .bene p, li { font-size: .95rem !important; line-height: 1.62; }
  .lead, .hero p, .page-hero p { font-size: 1rem !important; }
  /* Depuis qu'on a ramené l'accueil à un seul h1, le slogan du carrousel
     est un <p> : les règles de paragraphe ci-dessus, toutes en !important,
     le rabaissaient à 0,95rem et le titre de référencement paraissait
     alors plus important que la promesse. Il lui faut donc sa propre
     taille, affirmée au même niveau. */
  #hero .hc-text .hero-slogan { font-size: clamp(1.5rem, 6.2vw, 1.9rem) !important; }
  .article-figure figcaption, figcaption, small, .note { font-size: .82rem !important; }

  /* ── Les grands nombres qui défilent ────────────────────── */
  /* clamp(3.5rem, 8vw, 7rem) : à 390 px c'est le plancher de 56 px
     qui s'applique. Un chiffre de 56 px occupe un tiers de l'écran. */
  .stat-number, .stat-item .stat-number, .compteur-val,
  .kpi-number, .chiffre-val { font-size: 2.1rem !important; line-height: 1.05; }
  .stat-label { font-size: .78rem !important; }

  /* ── Respiration ────────────────────────────────────────── */
  /* Les sections respiraient sur 5 à 9 rem. Sur un écran de 844 px de
     haut, cela veut dire des demi-écrans vides entre deux idées. */
  .section, .stats-strip, .solutions, .process, .realisations,
  .about-section, .cta-section, .cta-banner {
    padding-block: 2.6rem !important;
  }
  .section-title + .gold-line, .gold-line { margin-block: .8rem !important; }
  .container, .wrap { padding-inline: 1.1rem; }

  /* ── Boutons ────────────────────────────────────────────── */
  .btn { font-size: .92rem; padding: .82rem 1.15rem; }
  .btn--lg { font-size: .95rem; padding: .95rem 1.3rem; }
}

/* Très petits écrans : on resserre encore d'un cran. */
@media (max-width: 380px) {
  h2, .section-title          { font-size: 1.26rem !important; }
  h1:not(.hero-h1), .hero h1:not(.hero-h1), .page-hero h1,
  h1.section-title            { font-size: 1.58rem !important; }
  .stat-number                { font-size: 1.9rem !important; }
}


/* ══════════════════════════════════════════════════════════════
   SIMULATEUR SUR TÉLÉPHONE
   Une seule vue, moins de titres, moins d'air. Le curseur et son
   résultat doivent tenir sous l'image sans qu'on ait à défiler
   entre l'action et son effet — sinon on règle à l'aveugle.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  .simu-toggle, .simu-view--ext { display: none !important; }
  .simu-ctl { padding: .9rem 1rem 1.1rem !important; gap: .55rem; }
  .simu-ctl h3 { display: none; }
  /* Le nom de la teinte : lisible, pas monumental. */
  .simu-teinte { margin: 0 0 .35rem !important; }
  .simu-teinte .js-teinte, .simu-teinte > span {
    font-size: 1.12rem !important; line-height: 1.2;
  }
  .simu-teinte small { font-size: .8rem !important; }
  .simu-ctl input[type=range] { margin: .35rem 0 !important; }
  /* Les jauges : trois lignes serrées valent mieux que trois pavés. */
  .js-gauges { gap: .35rem !important; }
  .js-gauges > * { font-size: .8rem !important; }
  .simu-cta { margin-top: .6rem !important; }
  .simu-cta .btn { width: 100%; font-size: .92rem; padding: .8rem 1rem; }
  .simu-note { font-size: .78rem !important; margin-top: .5rem !important; }
  /* L'image ne doit pas manger tout l'écran : on veut voir le curseur
     et le rendu en même temps. */
  .simu-stage { max-height: 46vh; }
  .simu-stage img { max-height: 46vh; object-fit: cover; }
}


/* ══════════════════════════════════════════════════════════════
   DEVIS EN PLEIN ÉCRAN (téléphone)
   La page de devis n'est pas une page de site : c'est un formulaire.
   On lui retire donc tout ce qui appartient au site — en-tête, fil
   d'Ariane, titre d'accueil, pied de page — et on la verrouille à la
   taille de l'écran. Le seul chemin de sortie est le hamburger, qui
   reste en place et tient lieu d'en-tête à lui seul.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {

  /* Plus rien ne bouge derrière : ni rebond vertical, ni glissement
     latéral. Le formulaire est le seul plan qui défile. */
  html:has(body.devis-focus) { overflow: hidden; }
  body.devis-focus {
    overflow: hidden;
    overscroll-behavior: none;
    height: 100dvh;
    padding: 0;
  }

  /* Ce qui appartient au site, pas au formulaire. */
  body.devis-focus .site-footer,
  body.devis-focus .page-hero,
  body.devis-focus .breadcrumb,
  body.devis-focus .pt-ai-bar,
  body.devis-focus .pt-fab { display: none !important; }

  /* L'en-tête se réduit au hamburger : pas de barre, pas de logo,
     pas de fond. Il flotte, il ne défile pas, il ne disparaît pas. */
  /* Spécificité (0,4,1) : v2.css impose le verre sombre en
     `body.pt2-site .site-header.pt2` (0,3,1) avec !important. Entre
     deux !important, c'est la spécificité qui tranche — il faut donc
     nommer les deux classes du body ET celle de l'en-tête, sinon le
     carré gris reste sous le rond du hamburger. */
  body.devis-focus.pt2-site .site-header.pt2,
  body.devis-focus .site-header {
    position: fixed !important;
    top: 8px !important; right: 8px !important; left: auto !important; bottom: auto !important;
    transform: none !important;
    width: auto !important; max-width: none !important; height: auto !important;
    min-height: 0 !important; padding: 0 !important; margin: 0 !important;
    /* `background: none` laissait la couleur de fond en place : le
       raccourci ne remettait pas `background-color` a transparent ici.
       On nomme donc les deux, sinon un carre gris de 48 px reste
       visible sous le rond du hamburger. */
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important; border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    z-index: 1200 !important;
  }
  body.devis-focus.pt2-site .site-header.pt2 .header-inner,
  body.devis-focus.pt2-site .site-header.pt2 .pt2-inner,
  body.devis-focus.pt2-site .site-header.pt2 .pt2-cols,
  body.devis-focus.pt2-site .site-header.pt2 .pt2-t2,
  body.devis-focus.pt2-site .site-header.pt2 .header-actions,
  body.devis-focus .site-header .header-inner,
  body.devis-focus .site-header .pt2-inner,
  body.devis-focus .site-header .pt2-cols,
  body.devis-focus .site-header .pt2-t2,
  body.devis-focus .site-header .header-actions {
    padding: 0; min-height: 0; border: 0; box-shadow: none;
    background-color: transparent !important; background-image: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  /* La chaîne réelle est .site-header > .pt2-inner > .pt2-cols >
     .pt2-t2 > .header-actions > #burger. Masquer un maillon masque le
     bouton avec lui, et aucun !important ne rattrape ça : un enfant
     d'un display:none n'est pas rendu. On ne masque donc que les
     FEUILLES, et on aplatit les conteneurs de la chaîne. */
  body.devis-focus .site-header .header-logo,
  body.devis-focus .site-header .pt2-t1,
  body.devis-focus .site-header .header-nav,
  body.devis-focus .site-header .header-devis,
  body.devis-focus .site-header .header-menu-devis,
  body.devis-focus .site-header .header-menu-logo { display: none !important; }
  body.devis-focus .site-header .pt2-inner,
  body.devis-focus .site-header .pt2-cols,
  body.devis-focus .site-header .pt2-t2,
  body.devis-focus .site-header .header-actions {
    display: flex !important; padding: 0 !important; margin: 0 !important;
    gap: 0 !important; background: none !important; border: 0 !important;
    min-height: 0 !important; box-shadow: none !important; width: auto !important;
  }

  /* Le bouton lui-même : assez grand pour le pouce, assez contrasté
     pour se voir sur n'importe quelle couleur de fond. */
  body.devis-focus #burger {
    display: flex !important; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 999px;
    background: rgba(12,27,46,.86);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 6px 20px rgba(0,0,0,.3);
  }
  body.devis-focus #burger span,
  body.devis-focus #burger span::before,
  body.devis-focus #burger span::after { background: #fff; }

  /* Menu ouvert : la page passe au second plan, ses commandes s'en
     vont avec elle. Sans cela la barre « Continuer » (z-index 1100)
     et le « Retour » du coin (1200) restent devant le panneau (999).
     Le logo, lui, ne revient pas : l'en-tête est un rond de 46 px
     dans le coin, il n'y a pas de place pour une marque. */
  body.devis-focus.menu-open .devis-barre,
  body.devis-focus.menu-open .devis-coin {
    opacity: 0; pointer-events: none; transition: opacity .18s ease;
  }
  body.devis-focus.menu-open .site-header .header-menu-logo,
  body.devis-focus.menu-open .site-header .header-menu-devis { display: none !important; }

  /* Le formulaire occupe l'écran, et lui seul défile. */
  body.devis-focus #main-content {
    position: fixed; inset: 0; z-index: 5;
    overflow-y: auto; overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 62px 0 max(1rem, env(safe-area-inset-bottom));
    background: var(--bg, #FAF9F6);
  }
  body.devis-focus #main-content > .section { padding-block: 0 !important; }
  body.devis-focus .devis-wrap { padding-inline: 1rem; }

  /* La barre d'étapes remonte en tête : c'est elle qui remplace le
     titre supprimé — on sait où l'on en est, pas ce qu'on lit. */
  body.devis-focus .devis-steps { margin-top: .2rem; }
  body.devis-focus .devis-step-label { font-size: .78rem; margin-bottom: .7rem; }

  /* Le choix des solutions : deux colonnes, tuiles plus basses, pour
     que les sept possibilités tiennent en un seul écran. */
  body.devis-focus .devis-empty-txt { font-size: .92rem !important; margin-bottom: .8rem; }
  body.devis-focus .devis-choice-grid { gap: .55rem; }
  body.devis-focus .devis-choice { min-height: 86px; border-radius: 12px; }
  body.devis-focus .devis-choice span { font-size: .86rem; }
  body.devis-focus .devis-skip { font-size: .84rem; margin-top: .8rem; }
}


/* ══════════════════════════════════════════════════════════════
   MENU TÉLÉPHONE — VERRE
   Un vrai verre a trois choses qu'un simple fond translucide n'a
   pas : de la profondeur (le flou sature ce qu'il y a derrière),
   une arête haute qui accroche la lumière, et une réaction au
   toucher. Le reste — filets, fonds de survol, bordures — s'efface.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  .mobile-nav {
    left: 10px !important; right: 10px !important;
    padding: .55rem .55rem .75rem !important;
    border-radius: 26px !important;
    background: linear-gradient(165deg,
                  rgba(18,32,54,.62) 0%,
                  rgba(10,19,34,.74) 55%,
                  rgba(8,15,28,.80) 100%) !important;
    -webkit-backdrop-filter: blur(38px) saturate(210%) brightness(1.04) !important;
    backdrop-filter: blur(38px) saturate(210%) brightness(1.04) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    box-shadow:
      0 32px 80px rgba(0,0,0,.5),
      0 4px 18px rgba(0,0,0,.28),
      inset 0 1px 0 rgba(255,255,255,.22),
      inset 0 -1px 0 rgba(201,168,76,.10) !important;
    overflow: hidden;
    max-height: calc(100dvh - var(--header-h) - var(--header-top) - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* La lueur spéculaire : une arête claire en haut, qui s'éteint sur
     les côtés. C'est elle qui fait « verre » plutôt que « calque ». */
  .mobile-nav::before {
    content: ''; position: absolute; inset: 0 0 auto; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.5) 35%,
                rgba(255,255,255,.5) 65%, transparent);
    pointer-events: none;
  }
  /* Plus de filets entre les lignes : c'est ce qui faisait « liste ». */
  .mobile-nav > *:not(:last-child) { border-bottom: 0 !important; }

  /* ── Les films, en vignettes ─────────────────────────────── */
  .mnav-films-t {
    font-size: .68rem; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: rgba(255,255,255,.5);
    padding: .75rem .7rem .5rem;
  }
  .mnav-films {
    display: grid; grid-template-columns: 1fr 1fr; gap: .45rem;
    padding: 0 .35rem .3rem;
  }
  .mnav-film {
    position: relative; display: block; overflow: hidden;
    border-radius: 15px; text-decoration: none;
    aspect-ratio: 16/10;
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
    transition: transform .16s ease;
  }
  .mnav-film:active { transform: scale(.97); }
  .mnav-film-img {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
  }
  .mnav-film-img::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(0deg, rgba(6,12,22,.88) 0%, rgba(6,12,22,.15) 62%);
  }
  .mnav-film-tx {
    position: absolute; inset: auto 0 0; z-index: 2;
    padding: .45rem .6rem;
    color: #fff; font-size: .8rem; font-weight: 700; letter-spacing: -.01em;
    text-shadow: 0 1px 6px rgba(0,0,0,.6);
  }

  /* ── Les rangées : plus fines, sans filet ────────────────── */
  .mnav-head, .mnav-link, .mnav-sim, .mnav-phone {
    padding: .78rem .7rem !important;
    font-size: .98rem !important;
    border-radius: 13px;
  }
  .mnav-head:active, .mnav-link:active, .mnav-sim:active, .mnav-phone:active {
    background: rgba(255,255,255,.09) !important;
  }
  .mnav-link--fin { font-weight: 600 !important; }
  .mnav-sub a { font-size: .9rem; padding: .52rem .7rem .52rem 1.2rem; }
  /* La bascule Particulier / Pro et le bouton Devis : au repos, pas
     deux pastilles dorées qui se disputent l'œil. */
  .mnav-cta { padding: .25rem .35rem .5rem !important; gap: .5rem; }
  .mnav-devis { font-size: .9rem !important; }
  .mnav-switch button { font-size: .88rem !important; }
}


/* ══════════════════════════════════════════════════════════════
   BARRE D’ACTION DU DEVIS (téléphone)
   Le bouton qui fait avancer ne doit jamais être à chercher. Il
   descend dans une barre fixe ; « Retour » monte en haut à gauche,
   en face du hamburger. Deux coins, deux gestes, rien qui bouge.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {

  /* Un panneau transformé devient bloc conteneur : les `position:
     fixed` qu'il contient se calent sur LUI. On neutralise donc le
     transform — au repos il ne vaut rien de visible. */
  body.devis-focus .devis-panel { transform: none !important; }

  /* Seul le panneau actif porte sa barre — les autres sont masqués,
     donc pas de superposition de trois barres. */
  /* La barre vit à la racine du document — voir le script de la page.
     Elle n'a donc aucun ancêtre susceptible de la retenir. */
  .devis-barre {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 1100;
    display: flex; align-items: center;
    padding: .7rem 1rem max(.7rem, env(safe-area-inset-bottom));
    background: rgba(250,249,246,.86);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    border-top: 1px solid rgba(12,27,46,.10);
    box-shadow: 0 -8px 30px rgba(12,27,46,.10);
  }
  .devis-barre > .btn {
    flex: 1; width: auto !important; min-height: 52px; margin: 0;
    font-size: 1rem; border-radius: 999px; justify-content: center;
  }
  /* « Retour » : le coin haut gauche, en face du hamburger. */
  .devis-coin { position: fixed; top: 8px; left: 8px; z-index: 1200; }
  .devis-coin > .btn {
    min-height: 46px; margin: 0; padding: 0 1rem 0 .85rem;
    border-radius: 999px; font-size: .88rem; font-weight: 700;
    background: rgba(255,255,255,.88);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border: 1px solid rgba(12,27,46,.14);
    box-shadow: 0 4px 16px rgba(12,27,46,.14);
    color: var(--navy, #0C1B2E);
  }
  body.devis-focus .devis-nav { min-height: 0; margin: 0; }
  body.devis-focus .devis-nav > span { display: none; }

  /* De la place sous le contenu, sinon la barre couvre le dernier champ. */
  body.devis-focus.devis-barre-on #main-content { padding-bottom: 96px; }
  body.devis-focus .devis-reassure { margin-bottom: .5rem; }

  /* ── La demande de confirmation ── */
  .quit-voile {
    position: fixed; inset: 0; z-index: 2000;
    display: flex; align-items: flex-end; justify-content: center;
    background: rgba(6,12,22,.45);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    opacity: 0; transition: opacity .22s ease;
  }
  .quit-voile.on { opacity: 1; }
  .quit-carte {
    width: 100%; margin: .6rem; padding: 1.3rem 1.2rem 1.1rem;
    border-radius: 24px;
    background: linear-gradient(165deg, rgba(30,44,68,.92), rgba(12,22,38,.96));
    -webkit-backdrop-filter: blur(30px) saturate(190%);
    backdrop-filter: blur(30px) saturate(190%);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 30px 70px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.2);
    color: #fff; transform: translateY(18px); transition: transform .26s cubic-bezier(.16,1,.3,1);
  }
  .quit-voile.on .quit-carte { transform: none; }
  .quit-carte h3 { font-size: 1.12rem !important; margin: 0 0 .4rem; color: #fff; }
  .quit-carte p { font-size: .9rem !important; color: rgba(255,255,255,.72); margin: 0 0 1.1rem; }
  .quit-actions { display: flex; flex-direction: column; gap: .5rem; }
  .quit-actions button {
    min-height: 50px; border-radius: 999px; border: 0; font-size: .95rem;
    font-weight: 700; font-family: inherit; cursor: pointer;
  }
  .quit-rester { background: var(--gold, #C9A84C); color: #0C1B2E; }
  .quit-partir {
    background: transparent; color: rgba(255,255,255,.72);
    border: 1px solid rgba(255,255,255,.2) !important;
  }
}


/* ══════════════════════════════════════════════════════════
   PLACE RÉSERVÉE AU SIMULATEUR
   `.simu` est vide dans le HTML : son contenu est construit par
   le script. Sans hauteur réservée, la page grandit de 523 px
   quand il s'installe et tout ce qui suit saute — c'est ce que
   mesurait le CLS de 0,382 sur téléphone.

   Ces valeurs sont les hauteurs relevées une fois le simulateur
   en place, à chaque palier. Si sa mise en page change, elles
   sont à reprendre avec elle.
   ══════════════════════════════════════════════════════════ */
.simu { min-height: 523px; }
@media (min-width: 700px)  { .simu { min-height: 620px; } }
@media (min-width: 1000px) { .simu { min-height: 430px; } }


/* ══════════════════════════════════════════════════════════
   ALTERNANCE DES FONDS SUR TÉLÉPHONE
   `.ac-teaser` sépare la grille des solutions du bloc
   « avant / après » sur ordinateur, mais elle est masquée sous
   1000 px. Sans elle, deux sections blanches se touchent.
   ══════════════════════════════════════════════════════════ */
@media (max-width: 999px) {
  .section--alt[aria-label="Comparez avant et après la pose de film"] {
    background: transparent;
  }
}


/* ══════════════════════════════════════════════════════════
   MENU DU TÉLÉPHONE — DIRECTION 1
   Tout tient dans l'écran : plus une seule liste de texte, et
   l'action ancrée en bas.

   Mesuré sur l'ancien : 1 325 px de contenu pour 734 px visibles,
   12 destinations sur 28 sous la ligne de flottaison, dont le
   numéro de téléphone en toute dernière ligne.
   ══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* Le panneau : une colonne, un corps, un pied ancré. */
  .mobile-nav {
    display: flex !important; flex-direction: column;
    max-height: calc(100dvh - var(--header-h, 62px) - var(--header-top, 10px) - 24px);
    padding: 0 !important; overflow: hidden !important;
  }
  /* ⚠ `.mobile-nav > *:not(:last-child)` pose un filet !important
     entre chaque enfant. Nos blocs n'en veulent pas. */
  .mobile-nav > .mnav-corps,
  .mobile-nav > .mnav-pied { border: 0 !important; }

  .mnav-corps {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    padding: .4rem .5rem .2rem;
    display: flex; flex-direction: column; gap: 0;
  }
  /* Dans une colonne flex, un enfant se comprime par défaut. La bande
     des secteurs, dont les pastilles sont en position absolue, ne
     bute sur rien : elle s'écrasait à 9 px pour 103 px de contenu. */
  .mnav-corps > * { flex: 0 0 auto; }

  .mnav-t {
    font-size: .64rem; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: rgba(255,255,255,.46);
    padding: .38rem .35rem .28rem;
  }

  /* ── Les films ──────────────────────────────────────────── */
  .mnav-films {
    display: grid; grid-template-columns: 1fr 1fr; gap: .4rem;
    padding: 0 !important;
  }
  .mnav-film--large { grid-column: 1 / -1; aspect-ratio: 32 / 9; }

  /* ── Les secteurs, en bande qui glisse ──────────────────── */
  .mnav-bande {
    display: flex; gap: .4rem; overflow-x: auto; padding: .1rem .35rem .3rem;
    /* Sans cela, les pastilles sont étirées, leur hauteur devient
       celle du conteneur — nulle — et l'aspect-ratio n'a plus rien
       à calculer : elles tombent à 2 px. */
    align-items: flex-start;
    margin: 0 -.35rem;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .mnav-bande::-webkit-scrollbar { display: none; }
  .mnav-sect {
    position: relative; flex: 0 0 27%; aspect-ratio: 1 / 1;
    border-radius: 13px; overflow: hidden; text-decoration: none;
    scroll-snap-align: start;
    border: 1px solid rgba(255,255,255,.10);
    padding: 0 !important; display: block !important;
    transition: transform .16s ease;
  }
  .mnav-sect:active { transform: scale(.96); }
  .mnav-sect-img {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    background-color: rgba(255,255,255,.06);
  }
  .mnav-sect-img::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(0deg, rgba(6,12,22,.88) 6%, rgba(6,12,22,.06) 72%);
  }
  .mnav-sect-tx {
    position: absolute; inset: auto 0 0; z-index: 2;
    padding: .3rem .38rem; color: #fff;
    font-size: .68rem; font-weight: 700; line-height: 1.16;
    text-shadow: 0 1px 5px rgba(0,0,0,.6);
  }
  .mnav-sect--tout {
    background: rgba(255,255,255,.07);
    display: grid !important; place-items: center; text-align: center;
  }
  .mnav-sect--tout .mnav-sect-tx {
    position: static; padding: .3rem; font-size: .66rem;
    color: var(--gold-light, #e6cf8f); text-shadow: none;
  }

  /* ── Le reste, en pastilles ─────────────────────────────── */
  .mnav-puces {
    display: flex; flex-wrap: wrap; gap: .32rem;
    padding: .4rem .35rem .25rem;
  }
  .mnav-puces a {
    display: inline-flex !important; align-items: center;
    padding: .42rem .78rem !important; border-radius: 999px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.09);
    color: rgba(255,255,255,.9) !important;
    font-size: .82rem !important; font-weight: 600 !important;
    text-decoration: none; transition: background .16s ease, transform .16s ease;
  }
  .mnav-puces a:active { transform: scale(.96); background: rgba(255,255,255,.13); }

  /* La bascule Pro : un lien, pas un bouton doré. */
  .mnav-pro {
    display: block; width: 100%; background: none; border: 0;
    color: rgba(255,255,255,.5); font-family: inherit;
    font-size: .8rem; text-align: center; padding: .4rem .35rem .2rem;
    cursor: pointer;
  }
  .mnav-pro:active { color: var(--gold-light, #e6cf8f); }

  /* ── Le pied ancré : l'action et le téléphone ───────────── */
  .mnav-pied {
    flex: 0 0 auto; display: flex; gap: .45rem; align-items: center;
    padding: .5rem .55rem calc(.55rem + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255,255,255,.1) !important;
    background: rgba(8,16,28,.42);
  }
  .mnav-pied .mnav-devis {
    flex: 1; display: flex !important; align-items: center; justify-content: center;
    background: var(--gold, #C9A84C); color: #0C1B2E !important;
    font-weight: 800; font-size: .98rem !important;
    padding: .78rem 1rem !important; border-radius: 999px;
    text-decoration: none; border: 0 !important;
    transition: transform .16s ease;
  }
  .mnav-pied .mnav-devis:active { transform: scale(.985); }
  .mnav-tel {
    flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%;
    display: grid !important; place-items: center; padding: 0 !important;
    background: rgba(255,255,255,.1); color: #fff !important;
    border: 1px solid rgba(255,255,255,.13);
    transition: transform .16s ease;
  }
  .mnav-tel:active { transform: scale(.94); }

  /* ── Le mouvement ───────────────────────────────────────── */
  @media (prefers-reduced-motion: no-preference) {
    /* Le panneau vient du coin où l'on a appuyé, pas du néant. */
    .mobile-nav {
      transform-origin: top right;
      transition: transform .26s cubic-bezier(.2,.7,.2,1), opacity .2s ease !important;
    }
    .mobile-nav:not(.open) { transform: scale(.94) !important; }
    .mobile-nav.open { transform: none !important; }

    /* Les tuiles arrivent en cascade — 18 ms, une seule fois. */
    .mobile-nav.open .mnav-film { animation: mnav-entre .3s both; }
    .mobile-nav.open .mnav-film:nth-child(1) { animation-delay: .04s; }
    .mobile-nav.open .mnav-film:nth-child(2) { animation-delay: .058s; }
    .mobile-nav.open .mnav-film:nth-child(3) { animation-delay: .076s; }
    .mobile-nav.open .mnav-film:nth-child(4) { animation-delay: .094s; }
    .mobile-nav.open .mnav-film:nth-child(5) { animation-delay: .112s; }
    .mobile-nav.open .mnav-film:nth-child(6) { animation-delay: .13s; }
    .mobile-nav.open .mnav-film:nth-child(7) { animation-delay: .148s; }
  }
  @keyframes mnav-entre {
    from { opacity: 0; transform: translateY(7px); }
    to   { opacity: 1; transform: none; }
  }
}


/* Ajustement fin : la direction 1 promet « tout tient sans défiler ».
   Il manquait 99 px. On les prend sur les proportions des tuiles —
   la photo reste lisible en 2:1 — et non sur le nombre de
   destinations, qui est justement ce qu'on voulait rendre visible. */
@media (max-width: 900px) {
  .mnav-films { gap: .34rem; }
  .mnav-film { aspect-ratio: 2 / 1; }
  .mnav-film--large { aspect-ratio: 44 / 9; }
  .mnav-sect { flex-basis: 25%; }
  .mnav-bande { gap: .34rem; }
  .mnav-puces { gap: .28rem; padding: .32rem .35rem .2rem; }
  .mnav-puces a { padding: .36rem .7rem !important; font-size: .8rem !important; }
}


/* Écrans courts — la majorité du parc mesuré par ANA (695 à 812 px).
   Trois colonnes de films : deux rangées au lieu de trois, et le
   menu retrouve sa promesse sans qu'on retire une destination. */
@media (max-width: 900px) and (max-height: 820px) {
  .mnav-films { grid-template-columns: repeat(3, 1fr); }
  .mnav-film { aspect-ratio: 16 / 11; }
  .mnav-film-tx { font-size: .72rem !important; padding: .34rem .42rem !important; }
  .mnav-film--large { aspect-ratio: 52 / 9; }
  .mnav-sect { flex-basis: 23%; }
  .mnav-t { padding: .3rem .35rem .22rem; }
}

/* ─────────────────────────────────────────────────────────────
   CTA de relais — comble les déserts d'action des pages longues

   Mesure d'août 2026 : sur /film-miroir-sans-tain/ un visiteur
   pouvait lire 20 écrans d'affilée sans un seul moyen d'agir ;
   18,9 sur /film-anti-vis-a-vis/, 11,4 sur /film-anti-chaleur/.
   L'accueil, qui rebondit le moins (55,4 % contre 70–82 %),
   était la seule page dont le plus grand désert restait sous
   8 écrans. On ramène les autres sous ce seuil.

   Volontairement discret : le but est d'être là au moment où
   l'envie arrive, pas de crier. ───────────────────────────── */
.cta-relais {
  margin: 3rem auto;
  max-width: 560px;
  padding: 1.6rem 1.4rem;
  text-align: center;
  background: rgba(201, 168, 76, .07);
  border: 1px solid rgba(201, 168, 76, .28);
  border-radius: 16px;
}
.cta-relais p {
  margin: 0 0 1.1rem;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--text-muted, #5b6572);
}
.cta-relais p strong { color: var(--navy, #0C1B2E); }
.cta-relais-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  justify-content: center;
}
/* Sur téléphone les deux boutons passent pleine largeur : deux
   cibles côte à côte à 390 px tombent sous le seuil tactile. */
@media (max-width: 480px) {
  .cta-relais { margin: 2.2rem auto; padding: 1.3rem 1.1rem; }
  .cta-relais-actions { flex-direction: column; }
  .cta-relais-actions .btn { width: 100%; }
}

/* Lien « toutes nos solutions », sous la grille des films du menu.
   Volontairement typographique et non tuilé : la grille au-dessus
   sert à choisir, cette ligne sert à sortir de la grille. */
.mnav-tout {
  display: block;
  margin: .5rem .35rem .1rem;
  padding: .6rem .7rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .10);
  color: rgba(255, 255, 255, .82);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: -.01em;
  text-align: center;
  text-decoration: none;
}
.mnav-tout:active { transform: scale(.98); background: rgba(255, 255, 255, .10); }

/* ─────────────────────────────────────────────────────────────
   Direction 3 — le menu mobile entre par la gauche

   Il « popait » depuis le haut-droite (scale .94, origine top right).
   Un glissement latéral dit mieux d'où vient le panneau et où il
   retourne : le geste de fermeture devient évident, ce qui compte
   sur un menu qu'on ouvre et referme beaucoup.

   Les règles d'origine sont en !important, l'override doit l'être
   aussi. Placé en fin de fichier pour gagner dans la cascade. */
.mobile-nav {
  transform-origin: center left !important;
  transition: transform .34s cubic-bezier(.22,.68,.24,1),
              opacity .22s ease !important;
  will-change: transform;
}
.mobile-nav:not(.open) {
  /* -110 % plutôt que -100 % : le panneau a une ombre portée qui
     dépasserait encore du bord gauche à -100 %. */
  transform: translateX(-110%) !important;
  opacity: 1 !important;
}
.mobile-nav.open { transform: translateX(0) !important; }

/* Le voile de fond suit le même tempo, sans glisser. */
body.menu-open::before { animation: mnav-voile .26s ease both; }
@keyframes mnav-voile { from { opacity: 0; } to { opacity: 1; } }

/* Sur demande système, on supprime le déplacement — pas la
   disponibilité du menu. */
@media (prefers-reduced-motion: reduce) {
  .mobile-nav { transition: opacity .15s ease !important; }
  .mobile-nav:not(.open) { transform: none !important; opacity: 0 !important; }
  .mobile-nav.open { opacity: 1 !important; }
  body.menu-open::before { animation: none; }
}

/* Où a lieu la pose de vitres teintées. Posé sous les zones du
   véhicule, là où la question se pose vraiment. */
.di-lieu {
  margin: .9rem 0 0;
  padding: .75rem .85rem;
  border-radius: 10px;
  background: rgba(201, 168, 76, .08);
  border: 1px solid rgba(201, 168, 76, .26);
  font-size: .88rem;
  line-height: 1.55;
  color: var(--text-muted, #5b6572);
}
.di-lieu strong { color: var(--navy, #0C1B2E); }
.di-lieu em { font-style: normal; opacity: .8; }

/* ═════════════════════════════════════════════════════════════
   DIRECTION 3 — deux bandes qu'on fait glisser

   Les grilles deviennent des bandes horizontales. La hauteur du
   menu retombe sous un écran : plus de défilement vertical, deux
   gestes latéraux à la place.
   ═════════════════════════════════════════════════════════════ */

/* L'intitulé porte son indice de glissement, à droite. */
.mnav-t { display: flex; align-items: baseline; justify-content: space-between; }
.mnav-glisse {
  font-size: .62rem; font-weight: 600; letter-spacing: .08em;
  text-transform: none; color: rgba(255, 255, 255, .38);
}

/* La piste déborde volontairement à droite : c'est ce bord coupé
   qui dit qu'il y a autre chose. Un dégradé le souligne. */
.mnav-piste {
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0 -.35rem; padding: 0 .35rem .15rem;
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
}
.mnav-piste::-webkit-scrollbar { display: none; }
.mnav-rail { display: flex; gap: .4rem; width: max-content; }

.mobile-nav .mnav-tuile {
  position: relative; display: block; overflow: hidden;
  flex: 0 0 auto; width: 45vw; max-width: 190px;
  aspect-ratio: 16 / 9;
  border-radius: 15px; text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .10);
  scroll-snap-align: start;
  animation: mnav-entre .3s both;
}
.mobile-nav .mnav-tuile--sect { width: 34vw; max-width: 140px; aspect-ratio: 3 / 2; }
.mnav-tuile-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.mnav-tuile::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(6, 12, 22, .82) 8%, rgba(6, 12, 22, .18) 62%, transparent 100%);
}
.mnav-tuile-tx {
  position: absolute; inset: auto 0 0; z-index: 2;
  padding: .45rem .55rem;
  color: #fff; font-size: .74rem; font-weight: 700;
  letter-spacing: -.01em; line-height: 1.2;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}
.mobile-nav .mnav-tuile:active { transform: scale(.97); }
/* La dernière tuile d'une bande n'a pas d'image : elle porte le lien
   vers la liste complète. */
.mobile-nav .mnav-tuile--tout {
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .06);
}
.mnav-tuile--tout::after { content: none; }
.mnav-tuile--tout .mnav-tuile-tx {
  position: static; text-align: center; text-shadow: none;
  color: rgba(255, 255, 255, .82); font-size: .72rem;
}

/* ── Les autres pages : des lignes, pas des pastilles ─────────
   Une ligne pleine largeur se vise mieux qu'une pastille, et elle
   laisse la place à un sous-titre qui dit ce qu'on va trouver. */
.mnav-lignes { display: flex; flex-direction: column; gap: 1px; padding: .35rem .35rem .15rem; }
.mobile-nav .mnav-ligne {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem;
  min-height: 46px; padding: 0 .7rem;
  border-radius: 11px; text-decoration: none;
  background: rgba(255, 255, 255, .04);
}
.mobile-nav .mnav-ligne:active { background: rgba(255, 255, 255, .10); }
.mnav-ligne-t { color: #fff; font-size: .86rem; font-weight: 650; letter-spacing: -.01em; }
.mnav-ligne-c { color: rgba(255, 255, 255, .32); font-size: 1.1rem; flex: none; }

/* Sur la page de devis, le bouton laisse place à une phrase : rien
   ne sert de proposer d'aller là où l'on se trouve déjà. */
.mnav-ici {
  flex: 1; text-align: center; align-self: center;
  color: rgba(255, 255, 255, .58); font-size: .8rem; line-height: 1.4;
}

/* ── L'arrivée du menu ───────────────────────────────────────
   Le panneau glisse depuis la gauche ; ses bandes et ses lignes
   arrivent juste derrière, décalées. Le mouvement dit d'où vient
   le panneau et où il retourne. */
@keyframes mnav-monte {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}
.mobile-nav.open .mnav-t,
.mobile-nav.open .mnav-piste,
.mobile-nav.open .mnav-lignes,
.mobile-nav.open .mnav-pro { animation: mnav-monte .34s both; }
.mobile-nav.open .mnav-t:nth-of-type(1)   { animation-delay: .06s; }
.mobile-nav.open .mnav-piste:nth-of-type(1) { animation-delay: .10s; }
.mobile-nav.open .mnav-t:nth-of-type(2)   { animation-delay: .14s; }
.mobile-nav.open .mnav-piste:nth-of-type(2) { animation-delay: .18s; }
.mobile-nav.open .mnav-lignes { animation-delay: .22s; }
.mobile-nav.open .mnav-pro    { animation-delay: .26s; }

/* ── La barre de recherche reste en place ────────────────────
   Elle disparaissait à l'ouverture du menu. Or c'est le seul
   moyen de trouver une page dont on ne connaît pas la rubrique :
   la retirer au moment précis où l'on cherche est le contraire de
   ce qu'il faut faire. Elle reste, au-dessus du voile, et le pied
   du menu lui laisse la place. */
body.menu-open .pt-ai-bar {
  /* Elle etait masquee par opacity + visibility, pas par display :
     retablir le seul display ne suffisait pas. */
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 9995;
}
/* Et le panneau raccourcit d'autant, sinon son pied se pose dessus. */
body.menu-open .mobile-nav {
  /* !important obligatoire : le JS pose un max-height EN LIGNE sur
     le panneau, et un style inline bat toute feuille sans lui. */
  max-height: calc(100dvh - var(--header-h, 62px) - var(--header-top, 10px) - 24px - 64px) !important;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav.open .mnav-t,
  .mobile-nav.open .mnav-piste,
  .mobile-nav.open .mnav-lignes,
  .mobile-nav.open .mnav-pro { animation: none; }
  .mnav-tuile { animation: none; }
  .mnav-piste { scroll-behavior: auto; }
}

/* ═════════════════════════════════════════════════════════════
   MENU MOBILE — finitions

   Trois choses : un bug de survol collant qui rendait une ligne
   illisible, un pied refait pour tenir à droite du bouton de
   recherche, et des boutons qui cessent d'être des rectangles de
   couleur.
   ═════════════════════════════════════════════════════════════ */

/* ── Le blanc sur blanc ──────────────────────────────────────
   `.mobile-nav a:hover` peint le fond en clair. Sur un écran
   tactile, le :hover RESTE collé après un appui — et comme le texte
   des lignes est blanc, la ligne devenait illisible. On neutralise
   ce survol hérité, et on ne le rétablit que là où un vrai curseur
   existe. */
.mobile-nav .mnav-ligne:hover,
.mobile-nav .mnav-tuile:hover,
.mobile-nav .mnav-devis:hover,
.mobile-nav .mnav-tel:hover {
  background: rgba(255, 255, 255, .04);
  color: inherit;
}
.mobile-nav .mnav-devis:hover { background: var(--gold, #C9A84C); color: #0C1B2E !important; }
.mobile-nav .mnav-tuile:hover { background: none; }
@media (hover: hover) and (pointer: fine) {
  .mobile-nav .mnav-ligne:hover { background: rgba(255, 255, 255, .09); }
  .mobile-nav .mnav-tel:hover   { background: rgba(255, 255, 255, .14); }
}

/* ── Le pied : à droite du bouton de recherche ───────────────
   Le bouton de recherche est un cercle fixe à 12 px du bord gauche.
   Le pied lui laisse la place et s'installe à sa droite, avec le
   numéro écrit en entier plutôt qu'une icône à deviner. */
.mobile-nav .mnav-pied {
  padding-left: calc(52px + 22px) !important;
  gap: .5rem !important;
}
.mobile-nav .mnav-tel {
  flex: 0 0 auto !important;
  width: auto !important;
  border-radius: 999px !important;
  padding: 0 .8rem !important;
  gap: .4rem;
  display: inline-flex !important;
  align-items: center;
}
.mnav-tel-num {
  font-size: .82rem; font-weight: 700; letter-spacing: -.01em;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
/* Sous 370 px, le numéro complet ne tient plus à côté du devis :
   on retombe sur l'icône seule plutôt que de tout comprimer. */
/* Le numero complet mange 149 px. En dessous de 400, cela ne
   laissait que 113 px au bouton de devis — donc au geste qui
   rapporte. On rend l'icone en dessous de ce seuil. */
@media (max-width: 399px) {
  .mnav-tel-num { display: none; }
  .mobile-nav .mnav-tel { width: 46px !important; padding: 0 !important; }
}

/* ── Des boutons, pas des rectangles de couleur ──────────────
   Ce qui distingue un bouton soigné d'un bouton plat : une lumière
   qui vient d'en haut, une ombre portée colorée plutôt que grise,
   un liseré interne clair, et un enfoncement franc au doigt. */
.mobile-nav .mnav-devis {
  border-radius: 999px !important;
  background: linear-gradient(178deg, #E4C874 0%, #C9A84C 52%, #B08F33 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -1px 0 rgba(0, 0, 0, .12),
    0 6px 18px rgba(176, 143, 51, .34),
    0 1px 2px rgba(0, 0, 0, .22) !important;
  border: 0 !important;
  font-weight: 700 !important;
  letter-spacing: -.012em;
  transition: transform .16s cubic-bezier(.2,.7,.2,1), box-shadow .16s ease;
}
.mobile-nav .mnav-devis:active {
  transform: scale(.965) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    0 2px 8px rgba(176, 143, 51, .28) !important;
}
.mobile-nav .mnav-tel {
  background: rgba(255, 255, 255, .09) !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 2px 10px rgba(0, 0, 0, .22) !important;
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  transition: transform .16s cubic-bezier(.2,.7,.2,1), background .16s ease;
}
.mobile-nav .mnav-tel:active { transform: scale(.95) !important; }

/* Les lignes gagnent le même liseré : c'est ce trait d'un pixel qui
   fait la différence entre « posé sur » et « découpé dans ». */
.mobile-nav .mnav-ligne {
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  transition: transform .14s ease, background .14s ease;
}
.mobile-nav .mnav-ligne:active { transform: scale(.99); }

/* Le bouton de recherche adopte le même langage. */
body.menu-open .pt-ai-bar {
  border: 1px solid rgba(255, 255, 255, .16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 4px 16px rgba(0, 0, 0, .3) !important;
}

/* ── Les tuiles grandissent ──────────────────────────────────
   Nos films : +15 %. Où l'on intervient : +10 %. */
.mobile-nav .mnav-tuile { width: 52vw; max-width: 219px; }
.mobile-nav .mnav-tuile--sect { width: 37vw; max-width: 154px; }

@media (prefers-reduced-motion: reduce) {
  .mobile-nav .mnav-devis,
  .mobile-nav .mnav-tel,
  .mobile-nav .mnav-ligne { transition: none; }
}

/* Les bandes agrandies reprennent 25 px sur les intitules et les
   marges, jamais sur les tuiles : c'est leur taille qu'on a voulu
   augmenter. */
.mobile-nav .mnav-t { padding: .5rem .7rem .3rem !important; }
.mobile-nav .mnav-piste { padding-bottom: 0; }
.mobile-nav .mnav-lignes { padding: .25rem .35rem .1rem; }
.mobile-nav .mnav-pro { padding-block: .35rem !important; }

/* Sur un écran court — iPhone SE, mini, petits Android — les
   bandes agrandies débordent de 16 à 20 px. On ne rend pas les
   tuiles à leur taille d'avant : on reprend la différence sur les
   marges, et seulement en dessous de 830 px de haut. */
@media (max-height: 830px) {
  .mobile-nav .mnav-tuile { width: 49vw; }
  .mobile-nav .mnav-tuile--sect { width: 35vw; }
  .mobile-nav .mnav-t { padding: .35rem .7rem .22rem !important; }
  .mobile-nav .mnav-ligne { min-height: 44px; }
  .mobile-nav .mnav-lignes { gap: 1px; padding: .15rem .35rem .05rem; }
}

/* ═════════════════════════════════════════════════════════════
   LA BARRE D'ACTIONS DU BAS

   Les deux actions qui comptent — obtenir un devis, appeler —
   sortent du panneau de menu. Elles vivaient dans son pied : elles
   n'existaient donc que menu ouvert, alors que ce sont les gestes
   qu'on veut rendre possibles à tout moment.

   Trois éléments, une ligne, bloqués en bas de l'écran :
       [recherche 52]  [Obtenir un devis]  [06 13 02 51 70]
   ═════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* Elles restent quand le menu s'ouvre — c'est tout l'objet. */
  body.menu-open .pt-mobile-devis,
  body.menu-open .pt-mobile-tel {
    display: inline-flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 9993;
  }

  /* Le devis laisse la place au numéro à sa droite. */
  .pt-mobile-devis {
    right: 170px !important;
    border-radius: 999px !important;
    background: linear-gradient(178deg, #E4C874 0%, #C9A84C 52%, #B08F33 100%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .55),
      inset 0 -1px 0 rgba(0, 0, 0, .12),
      0 6px 18px rgba(176, 143, 51, .34),
      0 1px 2px rgba(0, 0, 0, .22) !important;
    border: 0 !important;
    font-weight: 700 !important;
    letter-spacing: -.012em;
    transition: transform .16s cubic-bezier(.2,.7,.2,1), box-shadow .16s ease;
  }
  .pt-mobile-devis:active {
    transform: scale(.965) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 8px rgba(176,143,51,.28) !important;
  }

  .pt-mobile-tel {
    position: fixed; right: 12px;
    bottom: 14px; bottom: calc(14px + env(safe-area-inset-bottom));
    height: 52px; box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    padding: 0 .85rem; z-index: 9991;
    border-radius: 999px; text-decoration: none; color: #fff;
    background: rgba(12, 27, 46, .52);
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 4px 16px rgba(0,0,0,.3);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    transition: transform .16s cubic-bezier(.2,.7,.2,1), background .16s ease;
  }
  .pt-mobile-tel:active { transform: scale(.95); }
  .pt-mobile-tel-num {
    font-size: .82rem; font-weight: 700; letter-spacing: -.01em;
    white-space: nowrap; font-variant-numeric: tabular-nums;
  }

  /* Icône seule sur TOUS les téléphones (demande de Mathys, 08/10) :
     avant, le numéro complet s'affichait au-delà de 400 px. */
  @media (max-width: 900px) {
    .pt-mobile-tel-num { display: none; }
    .pt-mobile-tel { padding: 0; width: 52px; }
    .pt-mobile-devis { right: 76px !important; }
  }

  /* Sur la page de devis, proposer d'aller au devis n'aide personne :
     le téléphone prend toute la place. */
  body.page-devis .pt-mobile-devis { display: none !important; }
  body.page-devis .pt-mobile-tel { left: 76px; right: 12px; width: auto; }

  /* Les mêmes règles d'effacement que d'habitude restent prioritaires :
     consentement affiché, ou pied de page atteint. */
  /* Le menu ouvert passe devant le consentement : le voile du menu
     recouvre deja la banniere, la masquer une seconde fois n'aurait
     pour effet que de retirer le telephone. */
  body.rgpd-open:not(.menu-open) .pt-mobile-tel { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
  body.at-footer:not(.menu-open) .pt-mobile-tel { display: none !important; }

  /* La barre du bas (recherche/devis/tel) est fixed, donc hors du flux :
     rien ne réservait sa hauteur. Le dernier texte de chaque section
     passait dessous et se retrouvait recouvert, illisible. */
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
}

/* Le panneau n'a plus de pied : il peut descendre plus bas, en
   s'arrêtant juste au-dessus de la barre d'actions. */
body.menu-open .mobile-nav {
  max-height: calc(100dvh - var(--header-h, 62px) - var(--header-top, 10px) - 24px - 72px) !important;
}

@media (prefers-reduced-motion: reduce) {
  .pt-mobile-devis, .pt-mobile-tel { transition: none; }
}

/* ═══ Pages solutions, téléphone (10/10) : au défilement, l'en-tête
   avec le menu hamburger RESTE ; la barre « Recevoir mon devis »
   (.solpin) ne le remplace plus. Le devis reste accessible par la
   barre flottante du bas. Spécificité supérieure aux <style> des pages. */
@media (max-width: 900px){
  html body.solpin-active .site-header{ transform: translateX(-50%) !important; }
  html body.solpin-active .solpin{ transform: translateY(-100%) !important; visibility: hidden; }
}

/* ═══ Recherche dans l'en-tête + barre du bas allégée (11/10) ═══ */
/* Ordinateur : la loupe de l'en-tête remplace la pastille du bas.
   Téléphone : la pastille du bas reste (elle ouvre la nouvelle recherche). */
@media (min-width:901px){ .pt-ai-bar{ display:none !important; } }
.pt-search-btn{ appearance:none; display:inline-grid; place-items:center; width:40px; height:40px; flex:none; padding:0; cursor:pointer;
  border-radius:50%; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.08); color:#fff; transition:background .2s, border-color .2s; }
.pt-search-btn:hover{ background:rgba(255,255,255,.16); border-color:rgba(201,168,76,.7); }
.pt-search-btn:focus-visible{ outline:2px solid #C9A84C; outline-offset:2px; }
.site-header .header-actions{ display:flex; align-items:center; gap:.55rem; }
body.menu-open .pt-search-btn{ display:none; }
@media (max-width:900px){
  /* Téléphone (11/10, demande de Mathys) : recherche et appel restent
     TOUJOURS en bas ; pas de loupe en double dans l'en-tête. */
  .pt-search-btn{ display:none !important; }
  body.at-hero:not(.menu-open):not(.rgpd-open) .pt-ai-bar{ display:flex !important; }
  .pt-ai-bar{ background:rgba(12,27,46,.52) !important; border:1px solid rgba(255,255,255,.16) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 4px 16px rgba(0,0,0,.3) !important;
    -webkit-backdrop-filter:blur(16px) saturate(160%); backdrop-filter:blur(16px) saturate(160%); }
  .pt-ai-bar:active{ transform:scale(.95); }
}
.pt-mobile-devis, .pt-mobile-tel{ transition:transform .3s ease, opacity .3s ease, filter .2s ease; }
/* Seul « Obtenir un devis » se range en descendant ; appel et recherche restent. */
body.pt-bas-range:not(.menu-open) .pt-mobile-devis{ transform:translateY(150%) !important; opacity:0 !important; pointer-events:none !important; }
@media (min-width:901px){
  body.pt-bas-range:not(.menu-open) .pt-mobile-devis{ transform:translate(-50%, 150%) !important; }
}
@media (prefers-reduced-motion:reduce){ .pt-mobile-devis, .pt-mobile-tel{ transition:none; } }

/* ═══ « Obtenir un devis » flottant, téléphone (11/10, demande de Mathys) :
   verre transparent + or PrivTeint (texte et contour), comme les
   pastilles recherche / appel, au lieu du fond or plein. ═══ */
@media (max-width:900px){
  html body .pt-mobile-devis{
    background:rgba(12,27,46,.55) !important;
    color:#E6C56B !important;
    border:1.5px solid rgba(201,168,76,.85) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 6px 20px rgba(0,0,0,.28) !important;
    -webkit-backdrop-filter:blur(16px) saturate(160%);
    backdrop-filter:blur(16px) saturate(160%);
  }
  html body .pt-mobile-devis svg{ color:#E6C56B; }
  html body .pt-mobile-devis:active{ background:rgba(201,168,76,.22) !important; }
}

/* ═══ Menus ordinateur (11/10) ═══
   « Nos secteurs » : 5 colonnes × 2 rangées sans trou —
   Habitation en hauteur à gauche, Véhicules en hauteur tout à droite. */
@media (min-width:1041px){
  .mega-panels--grid{ grid-template-rows:130px 130px; }
  .mega-panels--grid .mega-panel--haut{ grid-column:1; grid-row:1 / 3; height:auto; }
  .mega-panels--grid .mega-panel--veh{ grid-column:5; grid-row:1 / 3; height:auto; }
}
.mega-panels--grid .mega-panel--veh .mega-panel-label{ font-size:.86rem; }
.mega-panels--grid .mega-panel--veh::after{ background:linear-gradient(to top, rgba(8,17,30,.85) 0%, rgba(8,17,30,.3) 60%, rgba(201,168,76,.12) 100%); }

/* Ordinateur : le bouton d'appel de la barre du bas n'avait de style que sous
   900 px — il s'affichait brut sous le pied de page de TOUTES les pages. */
@media (min-width: 901px){ .pt-mobile-tel{ display: none !important; } }

/* ═══ Pages solutions, ordinateur aussi (15/10/2026) : l'en-tête normal
   RESTE au défilement, la barre .solpin ne le remplace plus (demande de
   Mathys). Même règle que la version téléphone du 10/10. ═══ */
html body.solpin-active .site-header{ transform: translateX(-50%) !important; }
html body.solpin-active .solpin{ transform: translateY(-100%) !important; visibility: hidden; }

/* « Vous êtes ici » : page en cours dans les menus + titre à côté du logo. */
.header-nav .nav-mega-trigger.is-ici{ color:#E6C56B !important; box-shadow: inset 0 -2px 0 #C9A84C; }
.mega-panel.is-ici{ outline: 2px solid #C9A84C; outline-offset: 2px; border-radius: 12px; }
.mega-panel.is-ici .mega-panel-label{ color:#E6C56B; }
.mega-list a.is-ici, .header-nav > a.is-ici{ color:#E6C56B !important; }
.pt-ici{ display:none; }
@media (min-width: 1100px){
  .pt-ici{ display:inline-flex; align-self:center; flex:none; height:auto; max-height:2.1rem; line-height:1.2; align-items:center; gap:.45rem; margin-left:.9rem; padding:.32rem .8rem; border-radius:999px;
    border:1px solid rgba(201,168,76,.55); color:#E6C56B !important; font-size:.84rem; font-weight:600; white-space:nowrap;
    text-decoration:none; background:rgba(201,168,76,.08); }
  .pt-ici::before{ content:""; width:6px; height:6px; border-radius:50%; background:#C9A84C; }
  .pt-ici:hover{ background:rgba(201,168,76,.16); }
  .pt2-t1 > .pt-ici{ margin:0 auto 0 0; padding:.2rem .7rem; font-size:.78rem; }
}