/* ═══════════════════════════════════════════════════════════════
   GARAGE HORIZON · site.css v11  — GridCore demo
   Reescrita limpa: Barlow Condensed + Plus Jakarta Sans + IBM Plex Mono
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ────────────────────────────────────────────────── */
:root {
  --font-display : 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --font-impact  : 'Barlow Condensed', ui-sans-serif, system-ui, sans-serif;
  --font-body    : 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono    : 'IBM Plex Mono', 'Courier New', monospace;

  /* Brand */
  --gh-amber     : #D98E28;
  --gh-amber-hi  : #FFD07A;
  --gh-amber-soft: rgba(217,142,40,.14);
  --gh-cyan      : #3DD6F5;
  --gh-cyan-soft : rgba(61,214,245,.11);
  --gh-success   : #2DCC8B;
  --gh-red       : #FF5D5D;

  /* Dark surfaces */
  --gh-bg        : #050911;
  --gh-bg-2      : #091221;
  --gh-panel     : #0D1828;
  --gh-panel-2   : #101D2C;

  /* Dark text */
  --gh-text      : #ECF3FA;
  --gh-soft      : rgba(236,243,250,.70);
  --gh-muted     : rgba(236,243,250,.58);

  /* Lines */
  --gh-line      : rgba(180,210,240,.09);
  --gh-line-2    : rgba(180,210,240,.18);

  /* Layout */
  --gh-radius    : 20px;
  --gh-radius-lg : 30px;
  --gh-max       : 1180px;
  --gh-shadow    : 0 24px 80px rgba(0,0,0,.44);
  --gh-ease      : cubic-bezier(.16,1,.3,1);
  --hero-progress: 0;
  color-scheme   : dark;
}

/* ── 2. LIGHT THEME ───────────────────────────────────────────── */
:root[data-theme="light"] {
  --gh-bg        : #D6E3EB;
  --gh-bg-2      : #CBDBE6;
  --gh-panel     : #E4EEF4;
  --gh-panel-2   : #DCE8F0;
  --gh-text      : #07111C;
  --gh-soft      : rgba(7,17,28,.74);
  --gh-muted     : rgba(7,17,28,.64);
  --gh-line      : rgba(7,17,28,.10);
  --gh-line-2    : rgba(7,17,28,.20);
  --gh-shadow    : 0 24px 80px rgba(18,40,60,.18);
  color-scheme   : light;
}

/* ── 3. RESET + BASE ──────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box }
html { scroll-behavior: smooth; scroll-padding-top: 110px }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--gh-text);
  background:
    radial-gradient(circle at 18% 0%, rgba(61,214,245,.07), transparent 28rem),
    radial-gradient(circle at 84% 8%,  rgba(217,142,40,.09), transparent 26rem),
    linear-gradient(180deg, #030710 0%, var(--gh-bg) 50%, #070d18 100%);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Grain overlay */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none; opacity: .038;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Light body background */
:root[data-theme="light"] body {
  background:
    radial-gradient(circle at 18% 0%, rgba(61,214,245,.12), transparent 22rem),
    radial-gradient(circle at 86% 10%, rgba(217,142,40,.12), transparent 22rem),
    linear-gradient(180deg, #E4EEF4 0%, #D6E3EB 52%, #CBDBE6 100%);
}

a { color: inherit; text-decoration: none }
img, video { display: block; max-width: 100% }
button, input, select, textarea { font: inherit }
button { cursor: pointer }
h1,h2,h3 { margin-top: 0; font-family: var(--font-display); line-height: 1.04; letter-spacing: -.045em; text-wrap: balance; font-weight: 800 }
p { margin-top: 0; color: var(--gh-soft) }
:focus-visible { outline: 2px solid rgba(61,214,245,.65); outline-offset: 4px; border-radius: 6px }

/* ── 4. LAYOUT ────────────────────────────────────────────────── */
.gh-wrap { width: min(100% - 40px, var(--gh-max)); margin-inline: auto }
.gh-section, .gh-alerts, .gh-proof {
  position: relative; isolation: isolate;
  padding: clamp(72px, 10vw, 120px) 0;
}
.gh-section { overflow: hidden }

/* Section watermark number */
.gh-num {
  position: absolute; right: 0; top: 0;
  font-family: var(--font-impact); font-weight: 900;
  font-size: clamp(92px, 14vw, 180px);
  line-height: 1; letter-spacing: -.03em;
  color: var(--gh-text); opacity: .026;
  pointer-events: none; user-select: none; z-index: 0;
  overflow: hidden;
}

/* ── 5. TYPOGRAPHY ────────────────────────────────────────────── */
.gh-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: .70rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .22em;
  color: var(--gh-cyan);
}
.gh-kicker::before { content: ""; width: 24px; height: 1px; background: currentColor; opacity: .7 }

.gh-section-head { text-align: center; max-width: 780px; margin: 0 auto clamp(30px,4.6vw,48px) }
.gh-section-head--left { text-align: left; margin: 0 }
.gh-section-head .gh-kicker { justify-content: center }
.gh-section-head--left .gh-kicker { justify-content: flex-start }
.gh-section-head h2 { font-size: clamp(1.85rem, 3.45vw, 3.35rem); line-height: 1.06; margin: 14px 0 12px; font-weight: 800; letter-spacing: -.058em }
.gh-section-head p { max-width: 580px; margin: 0 auto; color: var(--gh-soft) }

/* Titres de contenu : système plus premium et régulier */
.gh-section-head h2,
.gh-diagnostic-main h2,
.gh-tyres-copy h2,
.gh-control-card h2,
.gh-booking-copy h2,
.gh-contact-card h2,
.gh-hours h3,
.gh-final-card h2 {
  font-family: var(--font-display);
  text-wrap: balance;
}
.gh-services .gh-section-head { max-width: 760px }
.gh-services .gh-section-head h2 {
  max-width: 690px;
  margin-inline: auto;
  font-size: clamp(1.85rem, 3.25vw, 3.15rem);
  line-height: 1.07;
}
.gh-services .gh-section-head p { max-width: 620px; font-size: .98rem }
.gh-section-head--left p { margin: 0 }

/* ── 6. SKIP LINK ─────────────────────────────────────────────── */
.gh-skip {
  position: fixed; top: -100%; left: 16px; z-index: 999;
  background: var(--gh-amber); color: #1A0E00;
  font-family: var(--font-mono); font-size: .78rem; font-weight: 700;
  padding: 8px 16px; border-radius: 999px;
  transition: top .2s;
}
.gh-skip:focus { top: 8px }

/* ── 7. BUTTONS ───────────────────────────────────────────────── */
.gh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px; border-radius: 999px;
  border: 1px solid var(--gh-line-2); font-family: var(--font-body);
  font-weight: 800; letter-spacing: -.01em;
  transition: transform .22s var(--gh-ease), box-shadow .22s var(--gh-ease), border-color .22s, background .22s, color .22s;
}
.gh-btn:hover { transform: translateY(-2px) }
.gh-btn--primary {
  background: linear-gradient(135deg, var(--gh-amber-hi), var(--gh-amber));
  border-color: rgba(217,142,40,.6); color: #1A0E00;
  box-shadow: 0 14px 36px rgba(217,142,40,.20);
}
.gh-btn--primary:hover { box-shadow: 0 22px 54px rgba(217,142,40,.32) }
.gh-btn--glass, .gh-btn--ghost {
  background: rgba(255,255,255,.04); color: var(--gh-text);
  backdrop-filter: blur(12px);
}
.gh-btn--glass:hover, .gh-btn--ghost:hover {
  border-color: rgba(61,214,245,.44); background: rgba(61,214,245,.08);
}
.gh-btn--large { min-height: 56px; padding: 14px 28px }
:root[data-theme="light"] .gh-btn--glass,
:root[data-theme="light"] .gh-btn--ghost {
  background: rgba(255,255,255,.50); color: #07111C; border-color: rgba(7,17,28,.18);
}
:root[data-theme="light"] .gh-btn--glass:hover { background: rgba(61,214,245,.12) }

/* ── 8. DEMO BAR ──────────────────────────────────────────────── */
.gh-demo-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 260;
  height: 38px; display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 0 16px;
  background: linear-gradient(90deg, #040810, #0E2236, #040810);
  border-bottom: 1px solid rgba(217,142,40,.28);
  font-family: var(--font-mono); font-size: .70rem; color: rgba(236,243,250,.60);
  white-space: nowrap; overflow: hidden;
}
.gh-demo-bar strong { color: var(--gh-amber) }
.gh-demo-bar a {
  color: #1A0E00; background: linear-gradient(135deg, var(--gh-amber-hi), var(--gh-amber));
  padding: 4px 13px; border-radius: 999px; font-weight: 800; flex: 0 0 auto;
}

/* ── 9. HEADER ────────────────────────────────────────────────── */
.gh-header {
  position: fixed; top: 38px; left: 0; right: 0; z-index: 230;
  padding: 18px 0;
  transition: padding .28s var(--gh-ease), background .28s, border-color .28s, box-shadow .28s;
}
.gh-header.is-stuck {
  padding: 10px 0;
  background: rgba(5,9,17,.82);
  border-bottom: 1px solid var(--gh-line);
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 40px rgba(0,0,0,.28);
}
:root[data-theme="light"] .gh-header.is-stuck {
  background: rgba(220,235,244,.84);
  border-bottom-color: rgba(7,17,28,.12);
  box-shadow: 0 8px 40px rgba(18,40,60,.12);
}
.gh-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.gh-brand { display: inline-flex; align-items: center; flex: 0 0 auto }
.gh-brand img { height: 40px; width: auto }
.gh-navlinks { display: flex; align-items: center; gap: 24px }
.gh-navlinks a {
  font-family: var(--font-mono); font-size: .72rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .12em;
  color: rgba(236,243,250,.62);
  transition: color .2s;
}
.gh-navlinks a:hover { color: var(--gh-text) }
:root[data-theme="light"] .gh-header:not(.is-stuck) .gh-navlinks a { color: rgba(236,243,250,.75) }
:root[data-theme="light"] .gh-header.is-stuck .gh-navlinks a { color: rgba(7,17,28,.68) }
:root[data-theme="light"] .gh-header.is-stuck .gh-navlinks a:hover { color: #07111C }
.gh-actions { display: flex; align-items: center; gap: 8px }
.gh-call {
  font-family: var(--font-mono); font-size: .76rem; font-weight: 700;
  color: rgba(236,243,250,.72); white-space: nowrap;
}
:root[data-theme="light"] .gh-header.is-stuck .gh-call { color: rgba(7,17,28,.70) }

/* Theme toggle */
.gh-theme {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--gh-line-2); border-radius: 999px;
  background: rgba(255,255,255,.04); color: var(--gh-text);
  transition: transform .22s var(--gh-ease), border-color .22s, background .22s;
}
.gh-theme:hover { transform: translateY(-2px); border-color: rgba(61,214,245,.4); background: rgba(61,214,245,.07) }
.gh-theme svg { width: 18px; height: 18px }
.gh-theme__moon { display: none }
:root[data-theme="light"] .gh-theme__sun { display: none }
:root[data-theme="light"] .gh-theme__moon { display: block }

/* Language selector */
.gh-lang { position: relative }
.gh-lang__current {
  min-width: 44px; height: 44px; border: 1px solid var(--gh-line-2);
  border-radius: 999px; background: rgba(255,255,255,.04); color: var(--gh-text);
  font-family: var(--font-mono); font-weight: 700; letter-spacing: .06em;
}
/* Tema claro + header sobre o hero escuro (não-fixo): os toggles usariam ícone/borda
   escuros (var(--gh-text)/--gh-line-2) e ficariam invisíveis. Dar contraste claro,
   como já fazem os links de nav. Ao ficar fixo (fundo claro), revertem aos tokens escuros. */
:root[data-theme="light"] .gh-header:not(.is-stuck) .gh-theme,
:root[data-theme="light"] .gh-header:not(.is-stuck) .gh-lang__current,
:root[data-theme="light"] .gh-header:not(.is-stuck) .gh-burger {
  color: #ECF3FA;
  border-color: rgba(236,243,250,.36);
  background: rgba(255,255,255,.12);
}
.gh-lang__panel {
  position: absolute; right: 0; top: calc(100% + 10px);
  width: 178px; padding: 8px;
  border: 1px solid var(--gh-line-2); border-radius: 18px;
  background: rgba(6,12,24,.96); box-shadow: var(--gh-shadow);
  backdrop-filter: blur(20px);
  display: grid; gap: 3px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: .22s var(--gh-ease);
}
.gh-lang.is-open .gh-lang__panel { opacity: 1; visibility: visible; transform: none }
.gh-lang__panel a, .gh-lang__panel button {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; border: 0; border-radius: 11px; padding: 9px 12px;
  background: transparent; color: rgba(236,243,250,.78);
  font-family: var(--font-mono); font-weight: 700; text-align: left;
  transition: background .18s, color .18s;
}
.gh-lang__panel a:hover, .gh-lang__panel button:hover,
.gh-lang__panel a[aria-current="page"] { background: rgba(61,214,245,.10); color: #fff }
.gh-lang__panel button[aria-disabled="true"] { opacity: .42; cursor: default }
.gh-lang__panel button[aria-disabled="true"]:hover { background: transparent; color: rgba(236,243,250,.78) }
.gh-lang__panel span { font-size: .68rem; font-weight: 500; color: rgba(236,243,250,.44) }
:root[data-theme="light"] .gh-lang__panel { background: rgba(228,238,244,.97) }
:root[data-theme="light"] .gh-lang__panel a,
:root[data-theme="light"] .gh-lang__panel button { color: #07111C }
:root[data-theme="light"] .gh-lang__panel span { color: rgba(7,17,28,.46) }

/* Burger */
.gh-burger {
  display: none; width: 44px; height: 44px;
  border: 1px solid var(--gh-line-2); border-radius: 999px;
  background: rgba(255,255,255,.04); color: var(--gh-text);
  place-items: center;
}
.gh-burger span { display: block; width: 17px; height: 1.5px; background: currentColor; border-radius: 999px; margin: 3px auto }

/* Scrim + Mobile nav */
.gh-scrim { position: fixed; inset: 0; z-index: 240; background: rgba(0,0,0,.54); backdrop-filter: blur(4px) }
.gh-mobile {
  position: fixed; z-index: 250; top: 48px; right: 14px;
  width: min(390px, calc(100vw - 28px));
  display: grid; gap: 5px; padding: 20px;
  border: 1px solid var(--gh-line-2); border-radius: 26px;
  background: rgba(6,12,22,.97); box-shadow: var(--gh-shadow);
  transform: translateY(-16px); opacity: 0; visibility: hidden;
  transition: .28s var(--gh-ease);
}
.gh-mobile.is-open { transform: translateY(0); opacity: 1; visibility: visible }
.gh-mobile a:not(.gh-btn) {
  padding: 13px 8px; border-bottom: 1px solid var(--gh-line);
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 700;
}
.gh-mobile-tools { display: grid; gap: 9px; padding: 12px 0; border-bottom: 1px solid var(--gh-line) }
.gh-mobile-tools button {
  border: 1px solid var(--gh-line-2); border-radius: 13px;
  background: rgba(255,255,255,.04); color: var(--gh-text);
  padding: 10px 12px; font-weight: 700;
}
.gh-mobile-lang { display: flex; align-items: center; gap: 6px; flex-wrap: wrap }
.gh-mobile-lang b, .gh-mobile-lang button, .gh-mobile-lang a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px;
  border: 1px solid var(--gh-line-2); border-radius: 999px;
  padding: 5px 14px; background: rgba(255,255,255,.04); color: var(--gh-text);
  font-family: var(--font-mono); font-size: .80rem; font-weight: 700;
}
.gh-mobile-lang b { border-color: rgba(217,142,40,.45); color: var(--gh-amber) }

/* ── 10. HERO CINEMA ──────────────────────────────────────────── */
.gh-cinema { position: relative; min-height: 210svh }
.gh-cinema__stage {
  position: sticky; top: 0; min-height: 100svh; overflow: hidden;
  display: grid; align-items: end;
  padding: calc(38px + 82px) 0 56px;
}
.gh-cinema__media {
  position: absolute; inset: 0; z-index: -4; overflow: hidden;
  background: #040810;
}
.gh-cinema__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at var(--hero-x, 62%) 52%, rgba(61,214,245,.09), transparent 30rem),
    linear-gradient(90deg,rgba(3,7,14,.44) 0%,rgba(3,7,14,.10) 44%,rgba(3,7,14,.08) 76%,rgba(3,7,14,.22) 100%),
    linear-gradient(to bottom,rgba(3,7,14,.02),rgba(3,7,14,.14) 56%,rgba(5,9,17,.75) 100%);
  pointer-events: none;
}
.gh-hero-video, .gh-hero-poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(1.14) contrast(1.10) brightness(1.05);
  transform: scale(var(--hero-scale, 1.03)) translate3d(var(--hero-shift, 1.5vw), 0, 0);
  will-change: transform;
  transition: opacity .3s;
}
.gh-hero-video.is-ready + .gh-hero-poster { opacity: 0 }
.gh-cinema__shade {
  position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(to bottom, rgba(3,7,14,0), rgba(3,7,14,.06) 50%, #050911 100%);
}
:root[data-theme="light"] .gh-cinema__shade {
  background: linear-gradient(to bottom, rgba(3,7,14,0), rgba(3,7,14,.08) 52%, #D6E3EB 100%);
}

/* Hero grid + copy */
.gh-cinema__grid { position: relative; display: block; min-height: calc(100svh - 38px - 82px - 56px) }
.gh-hero-copy {
  position: absolute; left: 0; bottom: 0; z-index: 3;
  max-width: 560px; padding: 22px 26px 24px;
  border: 1px solid rgba(217,142,40,.16);
  border-top: 2px solid rgba(217,142,40,.45);
  border-radius: 24px;
  background: linear-gradient(105deg, rgba(4,9,18,.60) 0%, rgba(4,9,18,.30) 60%, rgba(4,9,18,.10) 100%);
  backdrop-filter: blur(12px); box-shadow: 0 18px 56px rgba(0,0,0,.26), inset 0 1px 0 rgba(217,142,40,.12);
}
:root[data-theme="light"] .gh-hero-copy {
  background: linear-gradient(105deg, rgba(5,11,20,.56) 0%, rgba(5,11,20,.30) 60%, rgba(5,11,20,.10) 100%);
  border-color: rgba(61,214,245,.20);
}
.gh-hero-copy .gh-kicker { margin-bottom: 2px }
.gh-hero-copy h1 {
  font-size: clamp(2.65rem, 4.6vw, 5.35rem);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.065em;
  margin: 10px 0 12px;
  color: #ECF3FA;
  text-shadow: 0 14px 60px rgba(0,0,0,.54);
}
.gh-hero-copy h1 span { color: var(--gh-amber) }
.gh-hero-copy p { font-size: .96rem; max-width: 500px; color: rgba(236,243,250,.76); margin-bottom: 0 }
.gh-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 0 }

/* Inspection chapters */
.gh-inspection {
  position: absolute; right: 0; bottom: 0; z-index: 3;
  width: min(320px, 28vw);
  display: grid; align-content: end; gap: 6px;
}
.gh-open {
  justify-self: end; display: flex; align-items: center; gap: 10px;
  width: max-content; max-width: 100%; padding: 9px 14px;
  border: 1px solid rgba(45,204,139,.22); border-radius: 999px;
  background: rgba(5,11,20,.35); backdrop-filter: blur(12px);
  font-family: var(--font-mono); font-size: .78rem; color: rgba(236,243,250,.80);
}
.gh-open span {
  width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
  background: var(--gh-success); box-shadow: 0 0 0 5px rgba(45,204,139,.14);
}
.gh-open.is-closed { border-color: rgba(255,93,93,.22) }
.gh-open.is-closed span { background: var(--gh-red); box-shadow: 0 0 0 5px rgba(255,93,93,.14) }
.gh-chapter {
  margin: 0; padding: 8px 12px 8px 14px; border-radius: 0 12px 12px 0;
  border: 0; border-left: 2px solid transparent;
  background: transparent; box-shadow: none;
  opacity: .42; transition: opacity .26s var(--gh-ease), border-color .26s, background .26s;
}
.gh-chapter small {
  font-family: var(--font-mono); font-size: .66rem; font-weight: 700;
  color: rgba(217,142,40,.85); letter-spacing: .12em;
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.gh-chapter b { display: block; font-size: .96rem; margin: 2px 0; color: rgba(236,243,250,.76); text-shadow: 0 2px 10px rgba(0,0,0,.5) }
.gh-chapter p {
  max-height: 0; opacity: 0; overflow: hidden; margin: 0;
  color: rgba(236,243,250,.68); font-size: .87rem; line-height: 1.45;
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
  transition: max-height .28s var(--gh-ease), opacity .24s var(--gh-ease), margin .24s var(--gh-ease);
}
.gh-chapter.is-active {
  opacity: 1;
  border-left: 2px solid var(--gh-cyan);
  background: linear-gradient(90deg, rgba(61,214,245,.12), rgba(61,214,245,0) 82%);
  box-shadow: none;
}
.gh-chapter.is-active b { color: var(--gh-text) }
.gh-chapter.is-active p { max-height: 110px; opacity: 1; margin-top: 6px }

/* Progress bar */
.gh-progress {
  display: none; /* hidden per v4 request */
}

/* Scroll hint */
.gh-scroll-hint {
  position: absolute; right: calc((100vw - min(100% - 40px, var(--gh-max)))/2); bottom: 22px;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; color: rgba(217,142,40,.72); opacity: 1;
}
.gh-scroll-hint span {
  width: 20px; height: 32px; border: 1px solid rgba(217,142,40,.42); border-radius: 999px;
  position: relative;
}
.gh-scroll-hint span::before {
  content: ""; position: absolute; left: 50%; top: 6px;
  width: 3px; height: 3px; border-radius: 50%; background: var(--gh-amber);
  transform: translateX(-50%); animation: wheel 1.7s infinite;
}
@keyframes wheel { 50% { transform: translate(-50%, 10px); opacity: .32 } }

/* Lang status */
.gh-lang-status {
  position: absolute; right: 24px; bottom: 66px; z-index: 4;
  max-width: 320px; margin: 0; padding: 9px 14px;
  border: 1px solid rgba(217,142,40,.24); border-radius: 999px;
  background: rgba(5,11,20,.60); backdrop-filter: blur(14px);
  font-family: var(--font-mono); font-size: .76rem; font-weight: 500;
  color: rgba(236,243,250,.78);
  opacity: 0; transform: translateY(8px); transition: .22s var(--gh-ease);
}
.gh-lang-status.is-visible { opacity: 1; transform: none }

/* ── 11. DIAGNOSTIC ───────────────────────────────────────────── */
.gh-alerts { background: linear-gradient(180deg, #060b14, #091424); border-top: 1px solid var(--gh-line); border-bottom: 1px solid var(--gh-line) }
:root[data-theme="light"] .gh-alerts { background: linear-gradient(180deg, #D3E1EB, #C9D9E5) }
.gh-diagnostic-panel {
  display: grid; grid-template-columns: minmax(300px,.44fr) minmax(0,.56fr); gap: clamp(28px,4vw,48px); align-items: stretch;
  padding: clamp(28px,4.4vw,56px); border: 1px solid var(--gh-line);
  border-radius: var(--gh-radius-lg);
  background:
    radial-gradient(circle at 12% 22%, rgba(61,214,245,.08), transparent 20rem),
    radial-gradient(circle at 90% 8%, rgba(217,142,40,.08), transparent 18rem),
    linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  box-shadow: var(--gh-shadow);
}
:root[data-theme="light"] .gh-diagnostic-panel {
  background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(232,244,252,.45));
  border-color: rgba(7,17,28,.11);
}
.gh-diagnostic-side { display: flex; flex-direction: column; min-width: 0 }
.gh-diagnostic-side .gh-kicker { margin-bottom: 18px }
.gh-diagnostic-side p { max-width: 35ch; color: var(--gh-soft); font-size: 1rem; line-height: 1.65; margin-bottom: 0 }
.gh-diagnostic-visual {
  position: relative; flex: 1; margin-top: clamp(20px,3vw,34px); border-radius: var(--gh-radius); overflow: hidden;
  border: 1px solid var(--gh-line); min-height: 340px; isolation: isolate;
  background: #07111d; transition: transform .28s var(--gh-ease), border-color .28s, box-shadow .28s;
}
.gh-diagnostic-visual::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(360px circle at var(--x,50%) var(--y,50%), rgba(61,214,245,.18), transparent 48%);
  opacity: 0; transition: opacity .26s var(--gh-ease);
}
.gh-diagnostic-visual:hover { transform: translateY(-6px); border-color: rgba(61,214,245,.28); box-shadow: 0 26px 70px rgba(0,0,0,.30) }
.gh-diagnostic-visual:hover::before { opacity: 1 }
.gh-diagnostic-visual img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.06) contrast(1.04); transition: transform .65s var(--gh-ease), filter .65s var(--gh-ease) }
.gh-diagnostic-visual:hover img { transform: scale(1.05); filter: saturate(1.12) contrast(1.08) }
.gh-diagnostic-main { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; height: 100% }
.gh-diagnostic-main h2 {
  max-width: 620px;
  font-size: clamp(2.0rem, 3.35vw, 3.45rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.062em;
  margin: 0 0 clamp(24px,3.2vw,38px);
}
.gh-diagnostic-main h2 span { color: var(--gh-amber-hi); text-shadow: 0 10px 42px rgba(217,142,40,.24) }
:root[data-theme="light"] .gh-diagnostic-main h2 { color: #07111C }
.gh-alert-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; align-items: stretch; margin-top: auto }
.gh-alert {
  min-height: 150px; display: flex; flex-direction: column; justify-content: space-between; padding: 16px;
  border: 1px solid var(--gh-line); border-radius: var(--gh-radius);
  background: linear-gradient(160deg, rgba(255,255,255,.058), rgba(255,255,255,.022));
  transition: transform .26s var(--gh-ease), border-color .26s, background .26s, box-shadow .26s;
  position: relative; overflow: hidden;
}
.gh-alert::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(280px circle at var(--x,50%) var(--y,50%), rgba(217,142,40,.18), transparent 55%);
  opacity: 0; transition: opacity .26s;
}
.gh-alert:hover { transform: translateY(-5px); border-color: rgba(217,142,40,.42); box-shadow: 0 22px 64px rgba(0,0,0,.26) }
.gh-alert:hover::after { opacity: 1 }
.gh-alert svg { width: 22px; height: 22px; color: var(--gh-cyan); flex: 0 0 auto }
.gh-alert span { font-family: var(--font-mono); font-size: clamp(.58rem, .66vw, .68rem); text-transform: uppercase; letter-spacing: .105em; color: var(--gh-amber-hi); margin-top: auto; line-height: 1.35 }
.gh-alert b { font-family: var(--font-display); font-size: clamp(.92rem, 1.05vw, 1.05rem); font-weight: 800; margin-top: 6px; color: var(--gh-text); line-height: 1.08 }
:root[data-theme="light"] .gh-alert { background: rgba(255,255,255,.65); border-color: rgba(7,17,28,.11) }
:root[data-theme="light"] .gh-alert:hover { border-color: rgba(217,142,40,.50) }
:root[data-theme="light"] .gh-alert b { color: #07111C }

/* ── 12. PROOF ────────────────────────────────────────────────── */
.gh-proof { padding-block: 44px; background: rgba(255,255,255,.022) }
:root[data-theme="light"] .gh-proof { background: rgba(0,0,0,.04) }
.gh-proof-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px }
.gh-proof article {
  border: 1px solid var(--gh-line); border-radius: var(--gh-radius);
  background: rgba(255,255,255,.04); padding: 22px;
  transition: transform .26s var(--gh-ease), border-color .26s;
  position: relative; overflow: hidden;
}
.gh-proof article::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(250px circle at var(--x,50%) var(--y,50%), rgba(61,214,245,.12), transparent 55%);
  opacity: 0; transition: opacity .26s;
}
.gh-proof article:hover { transform: translateY(-4px); border-color: rgba(61,214,245,.28) }
.gh-proof article:hover::after { opacity: 1 }
.gh-proof span { font-family: var(--font-mono); display: block; color: var(--gh-cyan); text-transform: uppercase; letter-spacing: .18em; font-size: .65rem; font-weight: 700 }
.gh-proof strong { font-family: var(--font-display); display: block; font-size: clamp(1.08rem,1.55vw,1.45rem); font-weight: 800; letter-spacing: -.02em; margin: 7px 0 }
.gh-proof p { margin: 0; color: var(--gh-muted); font-size: .88rem }
:root[data-theme="light"] .gh-proof article { background: rgba(255,255,255,.50); border-color: rgba(7,17,28,.10) }
:root[data-theme="light"] .gh-proof strong { color: #07111C }

/* ── 13. SERVICES ─────────────────────────────────────────────── */
.gh-service-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px }
.gh-service-card {
  position: relative; overflow: hidden; border: 1px solid var(--gh-line);
  border-radius: var(--gh-radius); background: rgba(255,255,255,.04);
  transition: transform .26s var(--gh-ease), border-color .26s, box-shadow .26s;
}
.gh-service-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(320px circle at var(--x,50%) var(--y,50%), rgba(61,214,245,.18), transparent 46%);
  opacity: 0; transition: opacity .26s;
}
.gh-service-card:hover { transform: translateY(-6px); border-color: rgba(61,214,245,.28); box-shadow: 0 26px 70px rgba(0,0,0,.30) }
.gh-service-card:hover::before { opacity: 1 }
.gh-service-card img { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; filter: saturate(1.04) contrast(1.04); transition: transform .65s var(--gh-ease), filter .65s var(--gh-ease) }
.gh-service-card:hover img { transform: scale(1.05); filter: saturate(1.12) contrast(1.08) }
.gh-service-card > div { position: relative; z-index: 2; padding: 20px 22px }
.gh-service-card span { font-family: var(--font-mono); color: var(--gh-amber); font-size: .70rem; font-weight: 700; letter-spacing: .18em }
.gh-service-card h3 { font-family: var(--font-display); font-size: clamp(1.02rem,1.45vw,1.22rem); line-height: 1.12; font-weight: 800; margin: 7px 0 9px; letter-spacing: -.045em }
.gh-service-card p { margin: 0; color: var(--gh-soft); font-size: .94rem }
:root[data-theme="light"] .gh-service-card { background: rgba(255,255,255,.55); border-color: rgba(7,17,28,.10) }
:root[data-theme="light"] .gh-service-card h3 { color: #07111C }

/* ── 14. PNEUS ────────────────────────────────────────────────── */
.gh-tyres { background: linear-gradient(180deg, var(--gh-bg-2), #060b14) }
:root[data-theme="light"] .gh-tyres { background: linear-gradient(180deg, #CCE0EA, #C5D9E5) }
.gh-tyres-grid { display: grid; grid-template-columns: .80fr 1.20fr; gap: 24px; align-items: stretch }
.gh-tyres-copy {
  border: 1px solid var(--gh-line); border-radius: var(--gh-radius-lg);
  background: linear-gradient(180deg, rgba(17,31,50,.72), rgba(9,16,27,.90));
  padding: clamp(26px,4.5vw,48px); box-shadow: var(--gh-shadow);
  display: flex; flex-direction: column; justify-content: space-between;
}
:root[data-theme="light"] .gh-tyres-copy { background: rgba(255,255,255,.55); border-color: rgba(7,17,28,.11) }
.gh-tyres-copy h2 { font-size: clamp(1.45rem, 2.0vw, 2.25rem); line-height: 1.08; letter-spacing: -.055em; font-weight: 800; margin: 14px 0 16px }
:root[data-theme="light"] .gh-tyres-copy h2 { color: #07111C }
.gh-tyres-panel {
  position: relative; overflow: hidden; border: 1px solid var(--gh-line);
  border-radius: var(--gh-radius-lg); min-height: 460px; background: #08111D;
  box-shadow: var(--gh-shadow); display: flex; flex-direction: column; isolation: isolate;
  transition: transform .28s var(--gh-ease), border-color .28s, box-shadow .28s;
}
.gh-tyres-panel img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.62) saturate(1.08); transition: transform .65s var(--gh-ease), filter .65s var(--gh-ease) }
.gh-tyres-panel::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(3,7,14,.95), rgba(3,7,14,.04) 60%); pointer-events: none }
.gh-tyres-panel::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(360px circle at var(--x,50%) var(--y,50%), rgba(61,214,245,.16), transparent 48%);
  opacity: 0; transition: opacity .26s var(--gh-ease);
}
.gh-tyres-panel:hover { transform: translateY(-6px); border-color: rgba(61,214,245,.28); box-shadow: 0 26px 70px rgba(0,0,0,.30) }
.gh-tyres-panel:hover::before { opacity: 1 }
.gh-tyres-panel:hover img { transform: scale(1.05); filter: brightness(.70) saturate(1.14) contrast(1.06) }
.gh-tyres-cards { position: relative; z-index: 3; margin-top: auto; padding: 18px; display: grid; grid-template-columns: repeat(3,1fr); gap: 9px }
.gh-tyres-cards article {
  border: 1px solid rgba(255,255,255,.14); border-radius: 16px;
  background: rgba(5,11,20,.65); backdrop-filter: blur(14px); padding: 16px;
  box-shadow: 0 14px 44px rgba(0,0,0,.24);
  transition: transform .24s var(--gh-ease), border-color .24s;
}
.gh-tyres-cards article:hover { transform: translateY(-4px); border-color: rgba(217,142,40,.36) }
.gh-tyres-cards b { font-family: var(--font-display); display: block; font-size: .98rem; line-height: 1.14; font-weight: 800; margin-bottom: 5px; letter-spacing: -.035em }
.gh-tyres-cards span { font-family: var(--font-mono); color: rgba(236,243,250,.58); font-size: .76rem }

/* ── 15. CONTRÔLE ─────────────────────────────────────────────── */
.gh-control { background: radial-gradient(circle at 14% 28%, rgba(217,142,40,.09), transparent 28rem) }
:root[data-theme="light"] .gh-control { background: linear-gradient(180deg, #C9D9E5, #C0D4E0) }
.gh-control-panel {
  display: grid; grid-template-columns: .50fr .50fr; gap: 16px; align-items: stretch;
  padding: clamp(26px,4vw,44px); border: 1px solid var(--gh-line); border-radius: var(--gh-radius-lg);
  background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  box-shadow: var(--gh-shadow); position: relative; overflow: hidden;
}
.gh-control-panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 25% 18%, rgba(61,214,245,.07), transparent 20rem),
              radial-gradient(circle at 90% 80%, rgba(217,142,40,.06), transparent 18rem);
}
.gh-control-panel > * { position: relative; z-index: 1 }
.gh-control-panel { --x: 50%; --y: 50%; }
:root[data-theme="light"] .gh-control-panel { background: rgba(255,255,255,.55); border-color: rgba(7,17,28,.11) }
.gh-control-card {
  padding: clamp(22px,3.5vw,40px); border: 1px solid var(--gh-line); border-radius: 24px;
  background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
}
:root[data-theme="light"] .gh-control-card { background: rgba(255,255,255,.70); border-color: rgba(7,17,28,.11) }
.gh-control-card h2 { font-size: clamp(1.45rem, 2.05vw, 2.28rem); font-weight: 800; max-width: 24ch; margin: 14px 0 22px; line-height: 1.08; letter-spacing: -.055em }
.gh-control-card h2 span { color: var(--gh-amber) }
:root[data-theme="light"] .gh-control-card h2 { color: #07111C }
.gh-control-card p { max-width: 42ch; margin: 0 0 26px; color: var(--gh-soft) }
.gh-checklist--icons {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; align-content: start;
  border: 0; padding: 0; background: transparent; box-shadow: none;
}
.gh-checklist--icons article {
  padding: 22px 18px; border: 1px solid var(--gh-line); border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.018));
  transition: transform .24s var(--gh-ease), border-color .24s, background .24s;
}
.gh-checklist--icons article:hover { transform: translateY(-4px); border-color: rgba(61,214,245,.30); background: linear-gradient(180deg, rgba(61,214,245,.07), rgba(255,255,255,.018)) }
:root[data-theme="light"] .gh-checklist--icons article { background: rgba(255,255,255,.65); border-color: rgba(7,17,28,.11) }
.gh-checklist--icons svg { width: 44px; height: 44px; padding: 10px; margin-bottom: 18px; color: var(--gh-amber); border: 1px solid rgba(61,214,245,.18); border-radius: 999px; background: radial-gradient(circle at 50% 35%, rgba(61,214,245,.10), rgba(255,255,255,.018)) }
.gh-checklist--icons h3 { font-family: var(--font-display); font-size: .98rem; line-height: 1.12; font-weight: 800; margin: 0 0 7px; color: var(--gh-text); letter-spacing: -.035em }
:root[data-theme="light"] .gh-checklist--icons h3 { color: #07111C }
.gh-checklist--icons p { margin: 0; color: var(--gh-soft); font-size: .90rem; line-height: 1.45 }

/* ── 16. VÉHICULES ────────────────────────────────────────────── */
.gh-vehicles { padding-block: 80px }
.gh-vehicle-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px }
.gh-vehicle-grid article {
  border: 1px solid var(--gh-line); border-radius: 18px;
  background: rgba(255,255,255,.04); padding: 22px; min-height: 126px;
  transition: transform .24s var(--gh-ease), border-color .24s, background .24s;
  position: relative; overflow: hidden;
}
.gh-vehicle-grid article::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(220px circle at var(--x,50%) var(--y,50%), rgba(61,214,245,.10), transparent 55%);
  opacity: 0; transition: opacity .26s;
}
.gh-vehicle-grid article:hover { transform: translateY(-4px); border-color: rgba(61,214,245,.26) }
.gh-vehicle-grid article:hover::after { opacity: 1 }
.gh-vehicle-grid b { font-family: var(--font-display); display: block; font-size: clamp(1.02rem,1.45vw,1.18rem); line-height: 1.12; font-weight: 800; margin-bottom: 7px; letter-spacing: -.04em }
.gh-vehicle-grid span { font-family: var(--font-mono); color: var(--gh-muted); font-size: .76rem }
:root[data-theme="light"] .gh-vehicle-grid article { background: rgba(255,255,255,.50); border-color: rgba(7,17,28,.10) }
:root[data-theme="light"] .gh-vehicle-grid b { color: #07111C }

/* ── 17. PROCESSUS ────────────────────────────────────────────── */
.gh-process { background: var(--gh-panel) }
:root[data-theme="light"] .gh-process { background: linear-gradient(180deg, #D0E0EA, #C8D8E4) }
.gh-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px }
.gh-steps article {
  position: relative; border: 1px solid var(--gh-line); border-radius: var(--gh-radius);
  padding: 26px; background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.022));
  transition: transform .24s var(--gh-ease), border-color .24s;
}
.gh-steps article::after {
  content: ""; position: absolute; right: -16px; top: 36px;
  width: 16px; height: 1px; background: linear-gradient(90deg, var(--gh-amber), transparent);
}
.gh-steps article:last-child::after { display: none }
.gh-steps article:hover { transform: translateY(-4px); border-color: rgba(217,142,40,.32) }
:root[data-theme="light"] .gh-steps article { background: rgba(255,255,255,.55); border-color: rgba(7,17,28,.11) }
.gh-steps span {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gh-amber-hi), var(--gh-amber));
  color: #1A0E00; font-family: var(--font-mono); font-weight: 700; font-size: .88rem; margin-bottom: 18px;
}
.gh-steps h3 { font-family: var(--font-display); font-size: clamp(1.02rem,1.45vw,1.18rem); line-height: 1.12; font-weight: 800; margin-bottom: 7px; letter-spacing: -.04em }
:root[data-theme="light"] .gh-steps h3 { color: #07111C }

/* ── 18. BOOKING + FORM ───────────────────────────────────────── */
.gh-booking { background: linear-gradient(180deg, #060b14, #081623) }
:root[data-theme="light"] .gh-booking { background: linear-gradient(180deg, #CDE0EB, #C4D8E5) }
.gh-booking-panel {
  display: grid; grid-template-columns: .84fr 1.16fr; gap: 16px; align-items: stretch;
  border: 1px solid rgba(61,214,245,.14); border-radius: calc(var(--gh-radius-lg) + 8px); padding: 16px;
  background: radial-gradient(circle at 88% 18%, rgba(61,214,245,.10), transparent 28rem),
              linear-gradient(135deg, rgba(17,31,50,.78), rgba(6,11,20,.96));
  box-shadow: 0 36px 110px rgba(0,0,0,.36);
}
:root[data-theme="light"] .gh-booking-panel { background: rgba(255,255,255,.50); border-color: rgba(7,17,28,.14) }
.gh-booking-copy { padding: clamp(20px,3.5vw,36px) }
.gh-booking-copy h2 { font-size: clamp(1.45rem, 2.05vw, 2.3rem); line-height: 1.08; letter-spacing: -.055em; font-weight: 800; margin: 14px 0 }
:root[data-theme="light"] .gh-booking-copy h2 { color: #07111C }
.gh-booking-flow { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 26px }
.gh-booking-flow span {
  border: 1px solid var(--gh-line-2); border-radius: 999px; padding: 8px 13px;
  background: rgba(255,255,255,.04); font-family: var(--font-mono); font-size: .74rem; font-weight: 700;
}
:root[data-theme="light"] .gh-booking-flow span { background: rgba(255,255,255,.50); border-color: rgba(7,17,28,.14) }
.gh-booking-flow i { width: 28px; height: 1px; background: linear-gradient(90deg, var(--gh-cyan), transparent) }
.gh-form {
  display: grid; grid-template-columns: repeat(2,1fr); gap: 12px;
  border: 1px solid var(--gh-line); border-radius: var(--gh-radius-lg);
  background: rgba(5,11,20,.72); backdrop-filter: blur(18px);
  padding: clamp(16px,3vw,26px);
}
:root[data-theme="light"] .gh-form { background: rgba(255,255,255,.70); border-color: rgba(7,17,28,.12) }
.gh-field { display: grid; gap: 6px }
.gh-field--full { grid-column: 1/-1 }
.gh-field label { font-family: var(--font-mono); color: var(--gh-soft); font-size: .76rem; font-weight: 700; letter-spacing: .04em }
:root[data-theme="light"] .gh-field label { color: rgba(7,17,28,.72) }
.gh-field input, .gh-field select, .gh-field textarea {
  width: 100%; border: 1px solid rgba(255,255,255,.11); border-radius: 14px;
  background: rgba(255,255,255,.055); color: var(--gh-text); padding: 12px 14px; outline: none;
}
:root[data-theme="light"] .gh-field input,
:root[data-theme="light"] .gh-field select,
:root[data-theme="light"] .gh-field textarea {
  background: rgba(255,255,255,.80); border-color: rgba(7,17,28,.16); color: #07111C;
}
.gh-field textarea { resize: vertical }
.gh-field input:focus, .gh-field select:focus, .gh-field textarea:focus {
  border-color: rgba(61,214,245,.65); box-shadow: 0 0 0 3px rgba(61,214,245,.40);
}
.gh-field input[aria-invalid="true"],
.gh-field select[aria-invalid="true"],
.gh-field textarea[aria-invalid="true"] {
  border-color: var(--gh-red); box-shadow: 0 0 0 3px rgba(255,93,93,.18);
}
.gh-field ::placeholder { color: rgba(236,243,250,.34) }
:root[data-theme="light"] .gh-field ::placeholder { color: rgba(7,17,28,.38) }
.gh-form-note { grid-column: 1/-1; margin: 0; font-family: var(--font-mono); color: var(--gh-muted); font-size: .74rem }
.gh-form .gh-btn { width: max-content }
.gh-form-status { grid-column: 1/-1; margin: 0; min-height: 22px; font-family: var(--font-mono); font-size: .84rem; font-weight: 700 }
.gh-form-status.is-error { color: #FF9A9A }
.gh-form-status.is-ok { color: #82FFC0 }

/* ── 19. CONTACT ──────────────────────────────────────────────── */
.gh-contact { background: #060b14 }
:root[data-theme="light"] .gh-contact { background: linear-gradient(180deg, #CCE0EB, #C4D9E6) }
.gh-contact-grid { display: grid; grid-template-columns: .86fr 1.14fr; gap: 16px }
.gh-contact-card, .gh-hours {
  border: 1px solid var(--gh-line); border-radius: var(--gh-radius-lg);
  background: rgba(255,255,255,.04); padding: clamp(24px,4vw,40px);
}
:root[data-theme="light"] .gh-contact-card,
:root[data-theme="light"] .gh-hours { background: rgba(255,255,255,.55); border-color: rgba(7,17,28,.10) }
.gh-contact-card h2 { font-size: clamp(1.25rem, 1.75vw, 1.9rem); font-weight: 800; line-height: 1.1; margin: 8px 0 16px }
:root[data-theme="light"] .gh-contact-card h2 { color: #07111C }
.gh-contact-card p { color: var(--gh-soft) }
.gh-contact-card a:not(.gh-btn) { color: var(--gh-cyan) }
.gh-hours h3 { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.12; font-weight: 800; margin: 0 0 16px }
:root[data-theme="light"] .gh-hours h3 { color: #07111C }
.gh-hours ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px }
.gh-hours li {
  display: flex; justify-content: space-between; gap: 14px;
  border: 1px solid var(--gh-line); border-radius: 13px; padding: 11px 14px;
  font-family: var(--font-mono); font-size: .82rem; color: var(--gh-muted);
}
.gh-hours li.today { border-color: rgba(61,214,245,.38); background: rgba(61,214,245,.07); color: var(--gh-text) }
.gh-hours b { color: var(--gh-text); font-weight: 700 }
:root[data-theme="light"] .gh-hours b { color: #07111C }

/* ── 20. FAQ ──────────────────────────────────────────────────── */
.gh-faq { background: var(--gh-panel) }
:root[data-theme="light"] .gh-faq { background: linear-gradient(180deg, #D0E0EA, #C8D8E4) }
.gh-faq-grid { display: grid; grid-template-columns: .68fr 1.32fr; gap: 36px }
.gh-faq-list { display: grid; gap: 10px }
.gh-faq-item {
  border: 1px solid var(--gh-line); border-radius: 17px;
  background: rgba(255,255,255,.03); overflow: hidden;
  transition: border-color .22s, background .22s;
}
.gh-faq-item.is-open { border-color: rgba(61,214,245,.28); background: rgba(61,214,245,.04) }
:root[data-theme="light"] .gh-faq-item { background: rgba(255,255,255,.50); border-color: rgba(7,17,28,.10) }
:root[data-theme="light"] .gh-faq-item.is-open { border-color: rgba(61,214,245,.34); background: rgba(61,214,245,.06) }
.gh-faq-item button {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  border: 0; background: transparent; color: var(--gh-text); text-align: left;
  padding: 18px 20px; font-weight: 800; font-size: .96rem;
}
:root[data-theme="light"] .gh-faq-item button { color: #07111C }
.gh-faq-icon { width: 18px; height: 18px; flex: 0 0 auto; color: var(--gh-amber); transition: transform .24s var(--gh-ease) }
.gh-faq-item.is-open .gh-faq-icon { transform: rotate(180deg) }
.gh-faq-item > div { max-height: 0; overflow: hidden; transition: max-height .28s var(--gh-ease) }
.gh-faq-item p { padding: 0 20px 20px; margin: 0; color: var(--gh-soft) }
:root[data-theme="light"] .gh-faq-item p { color: rgba(7,17,28,.68) }

/* ── 21. FINAL CTA ────────────────────────────────────────────── */
.gh-final { padding: clamp(72px,10vw,120px) 0; background: radial-gradient(circle at 50% 0%, rgba(61,214,245,.08), transparent 30rem) }
:root[data-theme="light"] .gh-final { background: linear-gradient(180deg, #CCE0EB, #C5D8E5) }
.gh-final-card {
  text-align: center; border: 1px solid rgba(217,142,40,.20); border-radius: calc(var(--gh-radius-lg) + 10px);
  padding: clamp(32px,6vw,72px);
  background: linear-gradient(135deg, rgba(14,28,48,.78), rgba(6,11,20,.96));
  box-shadow: var(--gh-shadow);
}
.gh-final-card .gh-kicker { justify-content: center }
.gh-final-card h2 { font-size: clamp(1.45rem, 2.05vw, 2.45rem); line-height: 1.08; letter-spacing: -.055em; font-weight: 800; margin: 14px 0 16px; color: #ECF3FA }
.gh-final-card p { max-width: 720px; margin: 0 auto 28px; color: rgba(236,243,250,.72) }
.gh-final-card > div { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap }

/* ── 22. FOOTER ───────────────────────────────────────────────── */
.gh-footer { padding: 44px 0; border-top: 1px solid var(--gh-line); background: #030710 }
:root[data-theme="light"] .gh-footer { background: #B8CFD8; border-top-color: rgba(7,17,28,.12) }
.gh-footer-grid { display: grid; grid-template-columns: 1.2fr repeat(3,.72fr); gap: 28px }
.gh-footer p { max-width: 360px; color: var(--gh-muted); font-size: .90rem }
.gh-footer h3 { font-family: var(--font-display); font-size: 1rem; font-weight: 800; margin: 0 0 10px; letter-spacing: .04em }
.gh-footer a { font-family: var(--font-mono); display: block; color: var(--gh-muted); margin: 7px 0; font-size: .82rem; transition: color .18s }
.gh-footer a:hover { color: var(--gh-cyan) }
:root[data-theme="light"] .gh-footer p,
:root[data-theme="light"] .gh-footer a { color: rgba(7,17,28,.56) }
:root[data-theme="light"] .gh-footer h3 { color: #07111C }

/* ── 23. REVEALS ──────────────────────────────────────────────── */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .72s var(--gh-ease), transform .72s var(--gh-ease) }
[data-reveal].is-in { opacity: 1; transform: none }

/* Staggered reveals for grid groups */
[data-reveal-group] > * { opacity: 0; transform: translateY(18px); transition: opacity .58s var(--gh-ease), transform .58s var(--gh-ease) }
[data-reveal-group].is-in > *:nth-child(1) { transition-delay: 0ms }
[data-reveal-group].is-in > *:nth-child(2) { transition-delay: 70ms }
[data-reveal-group].is-in > *:nth-child(3) { transition-delay: 140ms }
[data-reveal-group].is-in > *:nth-child(4) { transition-delay: 210ms }
[data-reveal-group].is-in > *:nth-child(5) { transition-delay: 280ms }
[data-reveal-group].is-in > *:nth-child(6) { transition-delay: 350ms }
[data-reveal-group].is-in > * { opacity: 1; transform: none }

/* ── 24. RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 1180px) {
  .gh-diagnostic-panel { grid-template-columns: 1fr; align-items: start }
  .gh-diagnostic-main h2 { max-width: 760px; font-size: clamp(2.15rem, 6vw, 3.7rem) }
  .gh-alert-grid { grid-template-columns: repeat(2,minmax(0,1fr)) }
  .gh-control-panel { grid-template-columns: 1fr }
  .gh-actions .gh-lang, .gh-actions .gh-theme { display: none }
}
@media (max-width: 1060px) {
  .gh-navlinks, .gh-actions .gh-call, .gh-actions > .gh-btn { display: none }
  .gh-burger { display: grid }
  .gh-cinema__grid { display: grid; grid-template-columns: 1fr; min-height: auto }
  .gh-hero-copy, .gh-inspection { position: relative; left: auto; right: auto; bottom: auto; width: auto; max-width: 640px }
  .gh-hero-copy { border-radius: 24px; margin-top: 20vh; border-top: 2px solid rgba(217,142,40,.50) }
  .gh-inspection { margin-top: 22px; max-width: 560px }
  .gh-tyres-grid, .gh-contact-grid, .gh-booking-panel { grid-template-columns: 1fr }
  .gh-proof-grid, .gh-service-grid, .gh-vehicle-grid, .gh-footer-grid { grid-template-columns: repeat(2,1fr) }
  .gh-faq-grid { grid-template-columns: 1fr }
  .gh-lang-status { left: 20px; right: 20px; bottom: 22px; max-width: none }
}
@media (max-width: 740px) {
  html { scroll-padding-top: 88px }
  .gh-wrap { width: min(100% - 28px, var(--gh-max)) }
  .gh-demo-bar { justify-content: space-between; font-size: .68rem }
  .gh-demo-bar span { overflow: hidden; text-overflow: ellipsis }
  .gh-cinema { min-height: 170svh }
  .gh-cinema__stage { padding: 120px 0 56px }
  /* Mobile : on retire le "card" (verre/bordure/ombre) et on garde juste le texte */
  .gh-hero-copy { padding: 0 2px; margin-top: 0;
    background: none; border: 0; border-radius: 0;
    box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    text-shadow: 0 2px 14px rgba(3,7,14,.6) }
  :root[data-theme="light"] .gh-hero-copy { background: none; border: 0 }
  .gh-hero-copy .gh-kicker { font-size: .62rem; letter-spacing: .18em }
  .gh-hero-copy h1 { font-size: clamp(2.25rem, 10.5vw, 3.9rem); line-height: 1.0 }
  .gh-hero-copy p { font-size: .9rem; max-width: 38ch }
  .gh-hero-ctas { margin-top: 14px }
  .gh-inspection { width: 100%; max-width: none }
  .gh-scroll-hint { display: none }
  .gh-alert-grid, .gh-service-grid, .gh-proof-grid, .gh-vehicle-grid, .gh-steps, .gh-footer-grid, .gh-checklist--icons { grid-template-columns: 1fr }
  .gh-diagnostic-main h2, .gh-services .gh-section-head h2 { letter-spacing: -.045em }
  .gh-services .gh-section-head h2 { font-size: clamp(1.75rem, 7.8vw, 2.55rem); line-height: 1.08 }
  .gh-diagnostic-main h2 { font-size: clamp(1.9rem, 8.4vw, 2.75rem); line-height: 1.08 }
  .gh-tyres-cards { grid-template-columns: 1fr }
  .gh-tyres-panel { min-height: 540px }
  .gh-booking-flow i { display: none }
  .gh-form { grid-template-columns: 1fr }
  .gh-form .gh-btn { width: 100% }
  .gh-hours li { display: grid; gap: 3px }
  .gh-final-card { text-align: left }
  .gh-final-card .gh-kicker { justify-content: flex-start }
  .gh-final-card > div { justify-content: flex-start }
  .gh-num { font-size: clamp(80px, 28vw, 130px) }
  .gh-lang-status { display: none }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important }
  .gh-cinema { min-height: auto }
  .gh-cinema__stage { position: relative }
  .gh-hero-video { display: none }
  .gh-hero-poster { opacity: 1 !important }
  [data-reveal], [data-reveal-group] > * { opacity: 1 !important; transform: none !important }
}


/* ── 25. V9 · contrôle global des titres ───────────────────────── */
.gh-vehicles .gh-section-head h2,
.gh-process .gh-section-head h2,
.gh-faq .gh-section-head h2 {
  font-size: clamp(1.65rem, 2.65vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -.055em;
  max-width: 620px;
}
.gh-vehicles .gh-section-head,
.gh-process .gh-section-head {
  margin-bottom: clamp(28px, 4vw, 40px);
}
.gh-proof strong,
.gh-service-card h3,
.gh-tyres-cards b,
.gh-checklist--icons h3,
.gh-vehicle-grid b,
.gh-steps h3,
.gh-faq-item button {
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (max-width: 740px) {
  .gh-section-head h2,
  .gh-vehicles .gh-section-head h2,
  .gh-process .gh-section-head h2,
  .gh-faq .gh-section-head h2 {
    font-size: clamp(1.7rem, 7.4vw, 2.35rem);
    line-height: 1.1;
    letter-spacing: -.05em;
  }
  .gh-tyres-copy h2,
  .gh-control-card h2,
  .gh-booking-copy h2,
  .gh-final-card h2 {
    font-size: clamp(1.45rem, 6.4vw, 2.05rem);
    line-height: 1.1;
  }
}

/* ── 26. V10 · cohérence finale des titres et alignements ─────── */
/* Objectif : éviter les titres entre deux états — ni vraiment centrés, ni vraiment alignés. */
.gh-hero-copy h1 {
  max-width: 12ch;
  font-size: clamp(2.0rem, 3.1vw, 3.45rem);
  line-height: 1.01;
  letter-spacing: -.055em;
}

.gh-section-head h2 {
  font-size: clamp(1.8rem, 2.85vw, 2.85rem);
  line-height: 1.08;
  letter-spacing: -.052em;
}

/* Têtes de sections larges : alignement éditorial à gauche */
.gh-services .gh-section-head,
.gh-vehicles .gh-section-head,
.gh-process .gh-section-head {
  width: min(100%, var(--gh-max));
  max-width: var(--gh-max);
  margin-inline: auto;
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(260px, .58fr);
  gap: clamp(16px, 3.5vw, 48px);
  align-items: end;
}

.gh-services .gh-section-head .gh-kicker,
.gh-vehicles .gh-section-head .gh-kicker,
.gh-process .gh-section-head .gh-kicker {
  grid-column: 1 / -1;
  justify-content: flex-start;
}

.gh-services .gh-section-head h2,
.gh-vehicles .gh-section-head h2,
.gh-process .gh-section-head h2 {
  grid-column: 1;
  max-width: 620px;
  margin: 0;
  font-size: clamp(2rem, 2.85vw, 3rem);
  line-height: 1.04;
  letter-spacing: -.052em;
}

.gh-services .gh-section-head p,
.gh-vehicles .gh-section-head p,
.gh-process .gh-section-head p {
  grid-column: 2;
  max-width: 440px;
  margin: 0 0 4px;
  text-align: left;
  font-size: .98rem;
  line-height: 1.68;
}

.gh-process .gh-section-head {
  grid-template-columns: minmax(0, 1fr);
  max-width: var(--gh-max);
}
.gh-process .gh-section-head h2 { max-width: 560px; }

/* Bloco 06: deixa claro que título e texto pertencem ao mesmo eixo */
.gh-vehicles .gh-section-head h2 { max-width: 520px; }
.gh-vehicles .gh-section-head p { max-width: 430px; }

/* Bloco 03: título mais firme, menos “poster”, mais produto premium */
.gh-services .gh-section-head h2 { max-width: 570px; }
.gh-services .gh-section-head p { max-width: 455px; }

/* FAQ e CTA final: refinamento leve para manter a mesma escala visual */
.gh-faq .gh-section-head h2,
.gh-final-card h2 {
  font-size: clamp(1.55rem, 2.25vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -.046em;
}

.gh-booking-copy h2,
.gh-contact-card h2,
.gh-control-card h2,
.gh-tyres-copy h2 {
  letter-spacing: -.046em;
}

@media (max-width: 900px) {
  .gh-services .gh-section-head,
  .gh-vehicles .gh-section-head,
  .gh-process .gh-section-head {
    display: block;
    text-align: left;
  }
  .gh-services .gh-section-head p,
  .gh-vehicles .gh-section-head p,
  .gh-process .gh-section-head p {
    max-width: 620px;
    margin-top: 12px;
  }
}

@media (max-width: 740px) {
  .gh-hero-copy h1 {
    font-size: clamp(1.6rem, 7vw, 2.3rem);
    line-height: 1.03;
    max-width: 12ch;
  }
  .gh-section-head h2,
  .gh-services .gh-section-head h2,
  .gh-vehicles .gh-section-head h2,
  .gh-process .gh-section-head h2,
  .gh-faq .gh-section-head h2 {
    font-size: clamp(1.65rem, 7vw, 2.2rem);
    line-height: 1.11;
    letter-spacing: -.045em;
  }
}

/* ── 27. V11 · audit final layout + alignements ─────────────────
   Corrige les blocs qui semblaient entre deux alignements et stabilise
   l’image du bloc Diagnostic Client. */

/* Reset utile : évite les marges natives des <figure> qui désalignaient l’image. */
figure { margin: 0; }

/* Bloc 02 : image alignée au texte, légèrement élargie vers la gauche,
   sans dépasser le point de fin visuel précédent. */
.gh-diagnostic-panel {
  gap: clamp(30px, 4.6vw, 56px);
}
.gh-diagnostic-side {
  align-items: stretch;
}
.gh-diagnostic-side p {
  max-width: 39ch;
}
.gh-diagnostic-visual {
  margin: clamp(24px, 3.2vw, 36px) clamp(22px, 3vw, 40px) 0 0;
  width: auto;
  min-height: clamp(360px, 33vw, 460px);
  aspect-ratio: 5 / 6;
}
.gh-diagnostic-visual img {
  object-position: center center;
}

/* Les têtes de sections doivent partir du même axe que leurs grilles.
   On évite le faux équilibre titre à gauche / paragraphe trop à droite. */
.gh-services .gh-section-head,
.gh-vehicles .gh-section-head,
.gh-process .gh-section-head {
  display: block;
  width: min(100% - 40px, var(--gh-max));
  max-width: var(--gh-max);
  margin: 0 auto clamp(30px, 4.4vw, 48px);
  text-align: left;
}
.gh-services .gh-section-head .gh-kicker,
.gh-vehicles .gh-section-head .gh-kicker,
.gh-process .gh-section-head .gh-kicker {
  justify-content: flex-start;
}
.gh-services .gh-section-head h2,
.gh-vehicles .gh-section-head h2,
.gh-process .gh-section-head h2 {
  margin: 12px 0 0;
  max-width: 610px;
  font-size: clamp(2rem, 3vw, 3.05rem);
  line-height: 1.05;
  letter-spacing: -.052em;
}
.gh-services .gh-section-head p,
.gh-vehicles .gh-section-head p,
.gh-process .gh-section-head p {
  max-width: 620px;
  margin: 14px 0 0;
  text-align: left;
  font-size: clamp(.95rem, 1.2vw, 1.04rem);
  line-height: 1.68;
}
.gh-vehicles .gh-section-head h2,
.gh-process .gh-section-head h2 {
  max-width: 560px;
}
.gh-process .gh-section-head {
  margin-bottom: clamp(24px, 3.8vw, 38px);
}

/* Harmonisation secondaire : les blocs compacts gardent une taille lisible
   mais pas spectaculaire. */
.gh-tyres-copy h2,
.gh-control-card h2,
.gh-booking-copy h2,
.gh-contact-card h2,
.gh-hours h3,
.gh-final-card h2,
.gh-faq .gh-section-head h2 {
  font-size: clamp(1.45rem, 2.15vw, 2.35rem);
  line-height: 1.09;
  letter-spacing: -.046em;
}
.gh-final-card h2 {
  max-width: 720px;
  margin-inline: auto;
}
.gh-faq .gh-section-head {
  text-align: left;
  max-width: 360px;
  margin: 0;
}
.gh-faq .gh-section-head .gh-kicker {
  justify-content: flex-start;
}

/* Texte interne des cartes : plus régulier, moins condensé. */
.gh-service-card h3,
.gh-vehicle-grid b,
.gh-steps h3,
.gh-alert b,
.gh-proof strong {
  letter-spacing: -.035em;
}
.gh-service-card p,
.gh-vehicle-grid span,
.gh-steps p,
.gh-alert span {
  text-wrap: pretty;
}

@media (max-width: 980px) {
  .gh-diagnostic-visual {
    margin-right: 0;
    width: 100%;
    min-height: 340px;
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 740px) {
  .gh-services .gh-section-head,
  .gh-vehicles .gh-section-head,
  .gh-process .gh-section-head {
    width: min(100% - 32px, var(--gh-max));
    margin-bottom: 26px;
  }
  .gh-services .gh-section-head h2,
  .gh-vehicles .gh-section-head h2,
  .gh-process .gh-section-head h2,
  .gh-faq .gh-section-head h2 {
    font-size: clamp(1.55rem, 7vw, 2.15rem);
    line-height: 1.12;
  }
  .gh-services .gh-section-head p,
  .gh-vehicles .gh-section-head p,
  .gh-process .gh-section-head p {
    font-size: .94rem;
    line-height: 1.62;
  }
  .gh-diagnostic-visual {
    min-height: 300px;
  }
}

/* ── 28. V15 · correction bloc 02 entre tablette et desktop ─────
   Le layout à une colonne s'activait trop tôt entre 981px et 1180px.
   Résultat: l'image Diagnostic Client devenait trop haute dans le mockup
   et dans les tests responsive intermédiaires. On garde donc une mise en
   page en deux colonnes contrôlée sur cette plage uniquement, sans toucher
   au desktop large ni au vrai mobile/tablette. */
@media (min-width: 981px) and (max-width: 1180px) {
  .gh-diagnostic-panel {
    grid-template-columns: minmax(300px, .42fr) minmax(0, .58fr);
    align-items: stretch;
    gap: clamp(24px, 3vw, 36px);
    padding: clamp(28px, 3.6vw, 42px);
  }

  .gh-diagnostic-side {
    min-width: 0;
  }

  .gh-diagnostic-side p {
    max-width: 34ch;
    font-size: .96rem;
    line-height: 1.62;
  }

  .gh-diagnostic-visual {
    width: 100%;
    max-width: none;
    margin: clamp(20px, 2.5vw, 28px) 0 0;
    min-height: 0;
    aspect-ratio: 4 / 5;
    flex: 0 0 auto;
  }

  .gh-diagnostic-main h2 {
    max-width: 560px;
    font-size: clamp(2.05rem, 4.15vw, 3rem);
    line-height: 1.07;
    margin-bottom: clamp(22px, 2.8vw, 32px);
  }

  .gh-alert-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .gh-alert {
    min-height: 124px;
    padding: 14px;
  }

  .gh-alert svg {
    width: 19px;
    height: 19px;
  }

  .gh-alert span {
    font-size: .58rem;
    letter-spacing: .095em;
  }

  .gh-alert b {
    font-size: .92rem;
    line-height: 1.08;
  }
}

/* ── 29. V16 · hero scroll-scrub plus cinématique ────────────────
   Ajuste le rythme du hero pour un vidéo 8–10s: zone de scroll plus
   longue, parallax plus visible, cartes plus compactes et 5e étape cockpit. */
.gh-cinema { min-height: 285svh; }

.gh-hero-copy {
  transform: translate3d(0, var(--hero-copy-y, 0), 0);
  opacity: var(--hero-copy-alpha, 1);
  transition: opacity .18s linear;
}

.gh-inspection {
  transform: translate3d(0, calc(var(--hero-progress, 0) * -8px), 0);
}

.gh-chapter {
  padding: 8px 12px 8px 14px;
}

.gh-chapter b {
  font-size: .92rem;
}

.gh-chapter p {
  font-size: .84rem;
  line-height: 1.42;
}

.gh-chapter.is-active p {
  max-height: 96px;
}

.gh-progress {
  display: block;
  position: absolute;
  left: -18px;
  top: 48px;
  bottom: 8px;
  width: 1px;
  overflow: hidden;
  background: rgba(236,243,250,.10);
  border-radius: 999px;
}

.gh-progress i {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleY(var(--hero-progress, 0));
  transform-origin: top;
  background: linear-gradient(180deg, var(--gh-cyan), var(--gh-amber));
  box-shadow: 0 0 18px rgba(61,214,245,.32);
}

@media (min-width: 741px) and (max-width: 1060px) {
  .gh-cinema { min-height: 240svh; }
  .gh-progress { display: none; }
}

@media (max-width: 740px) {
  .gh-cinema { min-height: 155svh; }
  .gh-hero-copy,
  .gh-inspection { transform: none; opacity: 1; }
  .gh-progress { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .gh-cinema { min-height: auto; }
  .gh-hero-copy,
  .gh-inspection { transform: none !important; opacity: 1 !important; }
  .gh-progress { display: none; }
}