:root {
  /* Blue Color Palettes - Noguchi Design selection */
  --navy-950: #0b0c17;
  --navy-900: #19192e;
  --navy-800: #041642;
  --blue-800: #002063;
  --blue-700: #003e91;
  --blue-glow: #4da8ff;
  --orange: #ff7a30;
  --orange-dark: #e6611c;
  --gold: #ffd83d;

  --ink: #eef1fb;
  --ink-soft: #b7bede;
  --ink-mute: #8790b8;
  --line: rgba(255, 255, 255, 0.09);
  --radius: 14px;
  --shadow: 0 20px 50px rgba(0, 8, 30, 0.45);
  font-size: 16px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Firefox: site-wide scrollbar restyled to match the dark theme instead
     of the browser's default grey bar. Applies to the main page scroll and
     cascades to any scrollable element that doesn't set its own color. */
  scrollbar-width: thin;
  scrollbar-color: var(--orange) var(--navy-900);
}
/* Chrome/Edge/Safari equivalent. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--navy-900); }
::-webkit-scrollbar-thumb {
  background: var(--orange);
  border-radius: 999px;
  border: 2px solid var(--navy-900);
}
::-webkit-scrollbar-thumb:hover { background: var(--orange-dark); }

body {
  margin: 0;
  font-family: "Nunito Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--navy-900);
  line-height: 1.6;
  overflow-x: hidden;
}

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
  /* .hero is a flex row, and flex items default to min-width:auto - without
     this, a fixed-size child (like the hero logo image) stops .container
     from ever shrinking below that child's natural width, so on narrow
     screens it silently overflows past the viewport edge and gets clipped
     by .hero's own overflow:hidden instead of scaling down. */
  min-width: 0;
}

/* A phone number is never meant to break across lines, wherever it sits
   in running text (hero paragraphs, empty-search notes, etc.). */
a[href^="tel:"] { white-space: nowrap; }

a { color: inherit; text-decoration: none; }

h1, h2, h3 { line-height: 1.2; margin: 0 0 0.5em; font-weight: 800; font-family: "Nunito Sans", "Segoe UI", Arial, sans-serif; }

/* Display headings: the big statement titles get the poster face */
.hero h1, .page-hero h1, .section-title {
  font-family: "Anton", "Nunito Sans", Arial, sans-serif;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

/* Emphasis inside body copy: lifts a phrase out of the flat paragraph color */
.service-body p strong,
.engagement-item p strong,
.about-inner p strong,
.area-inner p strong,
.hero-lead strong,
.page-hero-lead strong,
.section-lead strong,
.service-detail-body strong,
.prestation-body p strong {
  color: #fff;
  font-weight: 800;
}

/* Solid one-word accents for headings that stay plain otherwise (used over
   photos/video where the full gradient sweep would hurt contrast). */
.hl { color: var(--orange); }
.hl-blue { color: var(--blue-glow); }

/* Reveal-on-scroll */

.reveal {
  --drift: 0px;
  opacity: 0;
  transform: translateY(34px) scale(0.97);
  transition: opacity 0.7s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: calc(var(--delay, 0) * 0.09s);
  will-change: transform, opacity;
}
.reveal[data-dir="up"] {
  transform: translateY(-34px) scale(0.97);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(var(--drift, 0px)) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { --drift: 0px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background:
    linear-gradient(120deg, transparent 20%, rgba(255, 122, 48, 0.14) 45%, rgba(77, 168, 255, 0.14) 55%, transparent 80%),
    rgba(11, 12, 23, 0.55);
  background-size: 250% 100%, 100% 100%;
  animation: header-sheen 12s ease-in-out infinite;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  box-shadow: 0 14px 34px rgba(0, 8, 30, 0.35);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
@keyframes header-sheen {
  0%, 100% { background-position: 200% 0, 0 0; }
  50% { background-position: -100% 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header { animation: none; }
}
.site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--orange), var(--blue-glow), transparent);
  opacity: 0.5;
}
.site-header.scrolled {
  background:
    linear-gradient(120deg, transparent 20%, rgba(255, 122, 48, 0.14) 45%, rgba(77, 168, 255, 0.14) 55%, transparent 80%),
    rgba(11, 12, 23, 0.86);
  border-bottom-color: var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 72px;
}

.logo {
  display: flex;
  align-items: center;
  margin-right: auto;
}
.logo-img {
  height: 40px;
  width: auto;
  display: block;
}

.main-nav {
  display: flex;
  gap: 30px;
}
.main-nav a {
  position: relative;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-soft);
  transition: color 0.15s ease;
  padding: 4px 0;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--orange), var(--blue-glow));
  transition: width 0.25s ease;
  border-radius: 2px;
}
.main-nav a:hover {
  background: linear-gradient(100deg, var(--orange) 0%, var(--blue-glow) 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.main-nav a:hover::after { width: 100%; }

.nav-item { position: relative; display: flex; align-items: center; }
.nav-dropdown {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 250px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(11, 12, 23, 0.97);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 20px 45px rgba(0, 8, 30, 0.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 60;
}
/* Invisible bridge over the gap between the link and the panel, so the
   mouse can travel down to it without the hover ending mid-way. */
.nav-item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 16px;
}
.nav-dropdown a {
  padding: 9px 12px !important;
  border-radius: 8px;
  font-size: 0.87rem !important;
  font-weight: 600;
  white-space: nowrap;
  color: var(--ink-soft);
}
.nav-dropdown a::after { display: none; }
.nav-dropdown a:hover {
  background: rgba(255, 122, 48, 0.12);
  -webkit-background-clip: initial;
  background-clip: initial;
  color: #fff;
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: #fff;
  border-radius: 2px;
}

/* Buttons */

.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.95rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  border: 1px solid transparent;
}
.btn-primary {
  position: relative;
  background: linear-gradient(100deg, var(--orange) 0%, var(--orange-dark) 100%);
  color: #fff;
  border-radius: 0;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  box-shadow: 0 10px 26px rgba(255, 122, 48, 0.3);
}
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  pointer-events: none;
}
.btn-primary:hover {
  transform: translateY(-2px);
  background: linear-gradient(100deg, #ff8f52 0%, var(--orange) 100%);
  box-shadow: 0 14px 32px rgba(255, 122, 48, 0.42);
}
.btn-glow {
  position: relative;
  animation: btn-pulse 2.6s ease-in-out infinite;
}
@keyframes btn-pulse {
  0%, 100% { box-shadow: 0 10px 26px rgba(255, 122, 48, 0.3), 0 0 0 0 rgba(255, 122, 48, 0.4); }
  50% { box-shadow: 0 10px 26px rgba(255, 122, 48, 0.3), 0 0 0 7px rgba(255, 122, 48, 0); }
}
.btn-ghost {
  border-color: rgba(255, 122, 48, 0.35);
  color: var(--blue-glow);
}
.btn-ghost:hover {
  border-color: var(--orange);
  color: var(--orange);
}
.site-header .btn-primary { padding: 10px 20px; }

/* Hero */

.hero {
  position: relative;
  padding: 150px 0 190px;
  overflow: hidden;
  isolation: isolate;
  min-height: 640px;
  display: flex;
  align-items: center;
}
.hero-fx {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--navy-900);
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(2px) brightness(0.55) saturate(1.15);
  transform: scale(1.03);
}
.hero-video-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(11,12,23,0.88) 0%, rgba(11,12,23,0.55) 45%, rgba(255,122,48,0.16) 75%, rgba(4,22,66,0.6) 100%),
    linear-gradient(0deg, var(--navy-950) 0%, var(--navy-950) 8%, rgba(11,12,23,0.15) 45%);
}

/* Hero logo mark, overlaid on the video */
.hero-logo {
  margin-bottom: 28px;
}
.hero-logo-img {
  height: 64px;
  width: auto;
  max-width: 100%;
  display: block;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,0.45));
}

@media (max-width: 860px) {
  .hero { padding: 130px 0 150px; min-height: 520px; }
}

.hero-inner { max-width: 680px; }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.8rem;
  font-weight: 700;
  margin: 0 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(100deg, var(--orange) 0%, var(--blue-glow) 65%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 8px rgba(255, 122, 48, 0.8);
  flex-shrink: 0;
}
.hero h1 {
  font-size: clamp(2.2rem, 4.4vw, 3.2rem);
  margin-bottom: 20px;
  color: #fff;
}
.hero-lead {
  font-size: 1.12rem;
  color: var(--ink-soft);
  margin-bottom: 34px;
  max-width: 540px;
}
.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* Rating badge */

.rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 18px;
  margin-bottom: 26px;
}
.rating-stars {
  color: var(--orange);
  letter-spacing: 1px;
  font-size: 0.95rem;
}
.rating-text {
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.rating-text strong { color: #fff; }

/* Service area */

.area {
  padding: 44px 0;
}
.area-inner { max-width: 780px; }
.area-inner p { color: var(--ink-soft); }

/* Partners marquee */

.partners {
  margin-top: 48px;
}
.partners-label {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-mute);
  margin: 0 0 22px;
}
.partners-track {
  display: flex;
  width: max-content;
  animation: partners-scroll 52s linear infinite;
}
.partners-track:hover { animation-play-state: paused; }
.partners-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-right: 20px;
  flex-shrink: 0;
}
.partner-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  height: 92px;
  padding: 0 14px;
}
.partner-badge img {
  height: auto;
  width: auto;
  max-height: 62px;
  max-width: 170px;
  object-fit: contain;
  display: block;
}
.partner-badge img[src*="partner-tse"],
.partner-badge img[src*="partner-gmf"],
.partner-badge img[src*="partner-maaf"],
.partner-badge img[src*="partner-mon-petit-carrossier"] {
  max-height: 76px;
}
@keyframes partners-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .partners-track { animation: none; }
}

/* Map embed */

.map-embed {
  grid-column: 1 / -1;
  margin-top: 40px;
  padding: 5px;
  border-radius: calc(var(--radius) + 5px);
  background: linear-gradient(135deg, var(--orange) 0%, var(--blue-glow) 100%);
  box-shadow: var(--shadow);
}
.map-embed iframe {
  display: block;
  border-radius: var(--radius);
  filter: grayscale(0.15) contrast(1.05);
}

/* Section shared */

.section-title {
  font-size: clamp(1.6rem, 3vw, 2.15rem);
  background: linear-gradient(100deg, #fff 0%, var(--orange) 55%, var(--blue-glow) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 22px rgba(255, 122, 48, 0.25));
}
.section-lead {
  color: var(--ink-soft);
  max-width: 620px;
  margin: 0 0 44px;
}

/* Services */

.services {
  padding: 64px 0;
}

/* Shared dark-surface treatment for every section below the hero:
   orange glow band at the very top and very bottom of each block (so
   consecutive sections meet orange-to-orange at the seam), blue glow
   pooling in the middle of the block. */
.dark-surface {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(77, 168, 255, 0.1), transparent 70%),
    linear-gradient(180deg,
      rgba(255, 122, 48, 0.22) 0,
      rgba(255, 122, 48, 0.05) 90px,
      transparent 170px,
      transparent calc(100% - 170px),
      rgba(255, 122, 48, 0.05) calc(100% - 90px),
      rgba(255, 122, 48, 0.22) 100%
    ),
    var(--navy-900);
}

.section-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.dark-surface > .container {
  position: relative;
  z-index: 1;
}
/* Slowly turning gear outlines - echoes the gear in the logo, reads as
   "garage" rather than an ambiguous particle effect. */
.gear {
  position: absolute;
  width: var(--size, 260px);
  height: var(--size, 260px);
  top: var(--gy, 10%);
  left: var(--gx, 80%);
  color: var(--blue-glow);
  opacity: var(--op, 0.07);
  overflow: hidden;
}
.gear--orange { color: var(--orange); }
/* Rotation lives on the inner group, not the <svg> box itself - a rotating
   square's own bounding box swells at 45°/135° (diagonal > side), which
   pushed gears past their section's overflow:hidden edge mid-spin. Spinning
   only the content keeps the outer box (and clipping) static. */
.gear-inner {
  transform-box: fill-box;
  transform-origin: center;
  animation: gear-spin var(--gdur, 50s) linear infinite;
  animation-direction: var(--gdir, normal);
}
.gear--gold { color: var(--gold); }
@keyframes gear-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .gear-inner { animation: none; }
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.service-card {
  position: relative;
  background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}
.service-card:hover {
  transform: translateY(-8px);
  border-color: rgba(77, 168, 255, 0.5);
  box-shadow: 0 24px 60px rgba(77, 168, 255, 0.18);
}

.service-photo {
  position: relative;
  height: 170px;
  background-size: cover;
  background-position: center;
}
.service-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,12,23,0.15) 0%, var(--navy-900) 100%);
  opacity: 0.85;
}
.service-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, var(--orange), var(--orange-dark));
  box-shadow: 0 6px 16px rgba(255, 122, 48, 0.4);
}
.service-badge svg { width: 22px; height: 22px; }

.service-body { padding: 26px 28px 30px; }
.service-card h3 { font-size: 1.2rem; line-height: 1.3; min-height: 2.6em; color: var(--orange); }
.service-card .service-body > p { color: var(--ink-soft); margin-bottom: 20px; }
.service-list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.service-list li {
  padding: 5px 0;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.service-list li::before {
  content: "•";
  color: var(--orange);
  margin-right: 8px;
}
/* Engagements */

.engagements { padding: 56px 0; }
.engagements .container { max-width: 1280px; }
.engagements-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 48px;
  margin-top: 40px;
}
.engagement-item { text-align: center; }
.engagement-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 122, 48, 0.4);
  color: var(--orange);
  box-shadow: 0 0 16px rgba(255, 122, 48, 0.2);
  margin-bottom: 16px;
}
.engagement-item:nth-child(even) .engagement-icon {
  color: var(--blue-glow);
  border-color: rgba(77, 168, 255, 0.4);
  box-shadow: 0 0 16px rgba(77, 168, 255, 0.2);
}
.engagement-icon svg { width: 28px; height: 28px; }
.engagement-item h3 {
  font-size: 1rem;
  line-height: 1.35;
  color: #fff;
  margin-bottom: 8px;
}
.engagement-item p {
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin: 0;
}

/* About */

.about {
  padding: 60px 0;
}
.about-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 56px;
  align-items: start;
}
.about-top { grid-column: 1 / -1; }
.about-inner p { color: var(--ink-soft); }

.about-photo {
  position: relative;
  padding: 5px;
  border-radius: calc(var(--radius) + 5px);
  background: linear-gradient(135deg, var(--orange) 0%, var(--blue-glow) 100%);
  box-shadow: var(--shadow);
}
.about-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--navy-900);
}

.about-highlights {
  display: grid;
  gap: 18px;
  align-content: start;
}
.highlight {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-left: none;
  border-radius: var(--radius);
  padding: 18px 22px 18px 26px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.highlight::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 4px;
  background: var(--orange);
}
.highlight:nth-child(even)::before { background: var(--blue-glow); }
.highlight:hover {
  border-color: rgba(77, 168, 255, 0.4);
  background: rgba(77, 168, 255, 0.07);
}
.highlight strong { font-size: 1.05rem; color: var(--orange); }
.highlight:nth-child(even) strong { color: var(--blue-glow); }
.highlight span { color: var(--ink-mute); font-size: 0.9rem; }

/* Contact */

.contact { padding: 64px 0 70px; }

.contact-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: start;
}

.contact-block {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.contact-label {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
}
.contact-value {
  font-size: 1.15rem;
  font-weight: 600;
  color: #fff;
}
a.contact-value:hover { color: var(--blue-glow); }

.hours-card {
  position: relative;
  overflow: hidden;
  margin-top: 64px;
  background:
    radial-gradient(ellipse 70% 60% at 100% 0%, rgba(255, 122, 48, 0.18), transparent 60%),
    linear-gradient(160deg, var(--blue-800), var(--navy-800));
  border: 1px solid var(--line);
  color: #fff;
  border-radius: var(--radius);
  padding: 34px 30px;
  box-shadow: var(--shadow);
}
.hours-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--orange), var(--blue-glow));
}
.hours-card h3 { margin-bottom: 18px; font-size: 1.1rem; }
.hours-list { margin: 0; }
.hours-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 0.92rem;
}
.hours-row:first-child { border-top: none; }
.hours-row dt { color: var(--ink-soft); }
.hours-row dd { margin: 0; font-weight: 600; }

.contact-form-card {
  position: relative;
  background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 32px;
  box-shadow: var(--shadow);
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 22px;
}
.contact-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-weight: 600;
}
.contact-form input,
.contact-form textarea {
  background: var(--navy-800);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 14px;
  color: var(--ink);
  font-family: "Nunito Sans", Arial, sans-serif;
  font-size: 0.95rem;
}
.contact-form textarea { min-height: 130px; resize: vertical; }
.contact-form input:focus,
.contact-form textarea:focus { outline: none; border-color: rgba(255, 122, 48, 0.5); }
.contact-form button { align-self: flex-start; margin-top: 4px; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-success {
  display: none;
  margin: 22px 0 0;
  padding: 16px 18px;
  border-radius: 10px;
  background: rgba(111, 216, 138, 0.12);
  border: 1px solid rgba(111, 216, 138, 0.35);
  color: #fff;
  font-weight: 600;
}
.form-success.is-visible { display: block; }
@media (max-width: 640px) {
  .contact-form .form-row { grid-template-columns: 1fr; }
}

/* "Prendre rendez-vous" notice modal: online booking isn't live yet, so the
   button explains that instead of silently trying to dial on desktop. */
.rdv-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(6, 7, 15, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.rdv-modal-overlay.is-open { display: flex; }
.rdv-modal {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: linear-gradient(160deg, var(--blue-800), var(--navy-800));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px 30px 30px;
  text-align: center;
  overflow: hidden;
}
.rdv-modal::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--orange), var(--blue-glow));
}
.rdv-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  color: var(--ink-soft);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.rdv-modal-close:hover { background: rgba(255,255,255,0.14); color: #fff; }
.rdv-modal-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--orange));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy-950);
}
.rdv-modal-icon svg { width: 26px; height: 26px; }
.rdv-modal h3 {
  color: #fff;
  font-size: 1.25rem;
  margin: 0 0 10px;
}
.rdv-modal p {
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 24px;
}
.rdv-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Sub-page hero (no video) */

.page-hero {
  padding: 110px 0 110px;
}
/* Shorter sections need tighter gradient stops than .dark-surface's default,
   otherwise the top and bottom glows cross over into one hard band. */
.page-hero.dark-surface {
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(77, 168, 255, 0.1), transparent 70%),
    linear-gradient(180deg,
      rgba(255, 122, 48, 0.22) 0,
      rgba(255, 122, 48, 0.05) 40px,
      transparent 75px,
      transparent calc(100% - 75px),
      rgba(255, 122, 48, 0.05) calc(100% - 40px),
      rgba(255, 122, 48, 0.22) 100%
    ),
    var(--navy-900);
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 {
  font-size: clamp(2rem, 4vw, 2.9rem);
  margin-bottom: 14px;
  background: linear-gradient(100deg, #fff 0%, var(--orange) 55%, var(--blue-glow) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 22px rgba(255, 122, 48, 0.25));
}
.page-hero-lead {
  color: var(--ink-soft);
  max-width: 640px;
  font-size: 1.05rem;
}
.breadcrumb {
  font-size: 0.85rem;
  color: var(--ink-mute);
  margin: 0 0 18px;
}
.breadcrumb a { color: var(--blue-glow); }
.breadcrumb a:hover { color: var(--orange); }
/* Fil d'Ariane visible masqué à la demande d'Arina (2026-10-12) : pas joli
   en haut des pages. Le BreadcrumbList JSON-LD de chaque page reste en place
   pour Google. */
.breadcrumb { display: none; }

/* Prestation grid (sub-pages) */

.prestations { padding: 20px 0 100px; }
.prestation-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.prestation-card {
  background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
.prestation-photo {
  height: 150px;
  margin: 14px 14px 0;
  background-size: cover;
  background-position: center;
  background-color: var(--navy-800);
  border-radius: 12px;
  border: 3px solid transparent;
  border-image: linear-gradient(135deg, var(--orange), var(--blue-glow)) 1;
  box-shadow: 0 0 10px rgba(255,138,61,0.5), 0 0 20px rgba(59,130,246,0.35);
}
.prestation-body {
  padding: 22px 24px 26px;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  row-gap: 12px;
  flex: 1;
}
.prestation-body h3 {
  font-size: 1.08rem;
  line-height: 1.3;
  color: var(--orange);
  margin: 0;
  align-self: start;
}
.prestation-body p.prestation-price {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-mute);
  margin: 0;
  align-self: start;
}
.prestation-price .price-amt,
.service-detail-price .price-amt {
  display: inline-flex;
  align-items: center;
  font-family: "Oswald", "Nunito Sans", Arial, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--navy-950);
  background: linear-gradient(135deg, var(--gold) 0%, #ffb454 100%);
  padding: 4px 14px;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35) inset, 0 6px 16px rgba(255, 180, 84, 0.35);
  font-variant-numeric: tabular-nums;
}
.prestation-body p {
  color: var(--ink-soft);
  font-size: 0.92rem;
  margin: 0;
  align-self: start;
}
/* Prestation cards already show a price/quote pill above this link, so it
   stays plain text (bold, glowing blue) instead of a second pill. */
.prestation-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Nunito Sans", Arial, sans-serif;
  font-size: 0.9rem;
  font-weight: 800;
  text-decoration: none;
  color: var(--blue-glow);
  text-shadow: 0 0 14px rgba(77, 168, 255, 0.55);
  transition: gap 0.2s ease, text-shadow 0.2s ease, color 0.2s ease;
}
.prestation-cta:hover {
  gap: 10px;
  color: #fff;
  text-shadow: 0 0 20px rgba(77, 168, 255, 0.85);
}

.prestation-cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.prestation-rdv-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border: none;
  border-radius: 999px;
  font-family: "Nunito Sans", Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-dark) 100%);
  box-shadow: 0 6px 16px rgba(255, 122, 48, 0.3);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.prestation-rdv-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(255, 122, 48, 0.45);
}

/* Homepage service cards have no price pill above this link, so it gets the
   full gold button treatment instead, matching the price badges elsewhere. */
.service-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 999px;
  font-family: "Nunito Sans", Arial, sans-serif;
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--navy-950);
  background: linear-gradient(135deg, var(--gold) 0%, #ffb454 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35) inset, 0 8px 20px rgba(255, 180, 84, 0.35);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, gap 0.2s ease, background 0.2s ease;
}
.service-more:hover {
  gap: 12px;
  transform: translateY(-2px);
  background: linear-gradient(135deg, #ffdd6e 0%, var(--gold) 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45) inset, 0 10px 26px rgba(255, 180, 84, 0.45);
}

.other-list {
  margin-top: 56px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 32px;
}
.other-list h3 { color: #fff; margin-bottom: 16px; }
.other-list ul {
  columns: 3;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.other-list li {
  padding: 6px 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
  break-inside: avoid;
}
.other-list li::before { content: "•"; color: var(--orange); margin-right: 8px; }

@media (max-width: 860px) {
  .prestation-grid { grid-template-columns: repeat(2, 1fr); }
  .other-list ul { columns: 2; }
}
@media (max-width: 600px) {
  .prestation-grid { grid-template-columns: 1fr; }
  .other-list ul { columns: 1; }
}

/* Service search: filter prestation cards by symptom/keyword */

.service-search { margin: 0 0 36px; }
.service-search-box {
  position: relative;
  max-width: 560px;
}
.service-search-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 19px;
  height: 19px;
  color: var(--ink-mute);
  pointer-events: none;
}
.service-search-input {
  width: 100%;
  padding: 15px 20px 15px 48px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  font-family: "Nunito Sans", Arial, sans-serif;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.service-search-input::placeholder { color: var(--ink-mute); }
.service-search-input:focus {
  border-color: var(--orange);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 3px rgba(255, 122, 48, 0.18);
}
.service-search-empty {
  display: none;
  margin: 24px 0 0;
  padding: 18px 22px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink-soft);
}
.service-search-empty.is-visible { display: block; }
.service-search-empty a { color: var(--orange); font-weight: 700; }
.service-search-empty a:hover { text-decoration: underline; }
.prestation-card.is-hidden { display: none; }

/* Service detail pages */

.service-detail { padding: 90px 0 80px; }
.service-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 20px 56px;
  align-items: start;
}
.service-detail-grid .about-photo img {
  aspect-ratio: auto;
  height: 320px;
}
.service-detail-body h2 {
  font-size: 1.25rem;
  color: var(--orange);
  margin: 30px 0 12px;
}
.service-detail-body h2:nth-of-type(even) { color: var(--blue-glow); }
.service-detail-body h2:first-child { margin-top: 0; }
.service-detail-body p { color: var(--ink-soft); margin: 0 0 14px; }
.service-detail-list {
  display: grid;
  gap: 10px;
  margin: 4px 0 26px;
  padding: 0;
  list-style: none;
}
.service-detail-list li {
  display: flex;
  gap: 10px;
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.service-detail-list li::before {
  content: "✓";
  color: var(--orange);
  font-weight: 700;
  flex-shrink: 0;
}
.service-detail-body p.service-detail-price {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink-mute);
  margin-bottom: 18px;
}
.service-detail-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.service-detail-photo-col { display: flex; flex-direction: column; gap: 24px; }
.related-services h2 {
  font-size: 1.1rem;
  color: #fff;
  margin-bottom: 14px;
}
.related-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  list-style: none;
}
.related-list a {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 0.9rem;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.related-list a:hover { border-color: var(--orange); color: #fff; }

/* Desktop: the end of the text (tail) and the FAQ + price + buttons sit in the
   left column under the photo so both columns end at about the same height.
   Mobile keeps DOM order: photo col, body, tail, faq */
@media (min-width: 861px) {
  .service-detail-grid { grid-template-rows: auto auto 1fr; }
  .service-detail-grid > .service-detail-photo-col { grid-column: 1; grid-row: 1; }
  .service-detail-grid > .service-detail-body { grid-column: 2; grid-row: 1 / span 3; }
  .service-detail-grid > .service-detail-tail { grid-column: 1; grid-row: 2; }
  .service-detail-grid > .service-detail-faq { grid-column: 1; grid-row: 3; }
}
.service-detail-faq { padding: 26px 28px; border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; background: rgba(255,255,255,0.03); }
.service-detail-faq h2:first-child,
.service-detail-tail h2:first-child { margin-top: 0; }

@media (max-width: 860px) {
  .service-detail-grid { grid-template-columns: 1fr; }
}

/* Footer */

.site-footer {
  position: relative;
  overflow: hidden;
  padding: 60px 0 0;
  color: var(--ink-mute);
  font-size: 0.85rem;
  background:
    radial-gradient(ellipse 70% 60% at 15% 0%, rgba(255, 122, 48, 0.1), transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 100%, rgba(77, 168, 255, 0.09), transparent 60%),
    var(--navy-950);
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--orange), var(--blue-glow), transparent);
  opacity: 0.7;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr 1.3fr;
  gap: 32px 28px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
}
.footer-brand-logo { height: 32px; width: auto; display: block; margin-bottom: 14px; }
.footer-col p { color: var(--ink-mute); font-size: 0.85rem; line-height: 1.6; max-width: 230px; margin: 0; }
.footer-col h3 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--orange);
  margin: 0 0 16px;
  font-family: "Nunito Sans", Arial, sans-serif;
  font-weight: 800;
}
.footer-col:nth-child(even) h3 { color: var(--blue-glow); }
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-list a { color: var(--ink); font-size: 0.88rem; transition: color 0.2s ease; }
.footer-list a:hover { color: var(--orange); }
.footer-hours { gap: 12px; }
.footer-hours li { display: flex; flex-direction: column; gap: 2px; }
.footer-hours li span:first-child {
  color: #fff;
  font-weight: 700;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.footer-hours li span:last-child { color: var(--ink-soft); font-size: 0.86rem; }
.footer-map-frame {
  padding: 4px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--orange) 0%, var(--blue-glow) 100%);
}
.footer-map-frame iframe {
  display: block;
  border-radius: 10px;
  filter: grayscale(0.2) contrast(1.05);
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 18px 0;
  font-size: 0.82rem;
}
.footer-note { color: var(--orange); }
.footer-legal { display: flex; gap: 16px; flex-wrap: wrap; }
.footer-legal a { color: var(--ink-mute); }
.footer-legal a:hover { color: #fff; }

/* Legal pages: long-form text content */
.legal-content {
  max-width: 780px;
  color: var(--ink-soft);
  line-height: 1.75;
}
.legal-content h2 {
  color: #fff;
  font-family: 'Oswald', sans-serif;
  font-size: 1.35rem;
  font-weight: 600;
  margin: 44px 0 14px;
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 {
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  margin: 26px 0 10px;
}
.legal-content p { margin: 0 0 14px; }
.legal-content ul { margin: 0 0 14px; padding-left: 22px; }
.legal-content li { margin-bottom: 8px; }
.legal-content a { color: var(--blue-glow); font-weight: 600; }
.legal-content a:hover { color: #fff; }
.legal-content strong { color: #fff; }

/* 404 page */
.error-code {
  font-family: 'Anton', sans-serif;
  font-size: clamp(4.5rem, 14vw, 8rem);
  line-height: 1;
  margin: 0 0 6px;
  color: var(--blue-glow);
}
.error-404 { max-width: 780px; color: var(--ink-soft); line-height: 1.75; }
.error-404 h2 { color: #fff; font-family: 'Oswald', sans-serif; font-size: 1.35rem; font-weight: 600; margin: 0 0 18px; }
.error-404-links { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.error-404-links a {
  display: inline-block;
  padding: 10px 18px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  color: #fff;
  font-weight: 600;
}
.error-404-links a:hover { border-color: var(--blue-glow); color: var(--blue-glow); }
.error-404 p { margin: 0 0 18px; }
.error-404-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.legal-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 20px;
  font-size: 0.9rem;
}
.legal-content th, .legal-content td {
  text-align: left;
  padding: 10px 14px;
  border: 1px solid var(--line);
}
.legal-content th { color: #fff; background: rgba(255,255,255,0.04); }
.legal-updated {
  display: inline-block;
  font-size: 0.8rem;
  color: var(--ink-mute);
  margin-bottom: 30px;
}

/* Support widget: floating FAQ bubble, bottom-left (mirrors the cart
   toggle on the pieces page, which sits bottom-right, so the two never
   overlap). */
#support-toggle {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 500;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(100deg, var(--blue-glow) 0%, var(--blue-700) 100%);
  box-shadow: 0 14px 32px rgba(77, 168, 255, 0.4);
  border: none;
  color: #fff;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
}
#support-toggle svg { width: 24px; height: 24px; }
#support-toggle .support-chat-icon {
  position: absolute;
  inset: 0;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover;
}
#support-toggle .support-close-icon { display: none; }
#support-toggle.is-open .support-chat-icon { display: none; }
#support-toggle.is-open .support-close-icon { display: block; }

#support-hint {
  position: fixed;
  left: 90px;
  bottom: 32px;
  z-index: 499;
  display: none;
  align-items: center;
  gap: 8px;
  max-width: 220px;
  background: linear-gradient(160deg, var(--blue-800), var(--navy-800));
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 12px 10px 16px;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
#support-hint.is-visible { display: flex; opacity: 1; transform: translateX(0); }
#support-hint span {
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.35;
  cursor: pointer;
}
#support-hint-close {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink-mute);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
#support-hint-close:hover { background: rgba(255, 255, 255, 0.16); color: var(--ink); }
@media (max-width: 640px) {
  #support-hint { left: 84px; bottom: 26px; max-width: 170px; }
}

#support-panel {
  position: fixed;
  left: 22px;
  bottom: 92px;
  z-index: 500;
  width: 340px;
  max-width: calc(100vw - 44px);
  max-height: min(560px, calc(100vh - 130px));
  background: linear-gradient(160deg, var(--blue-800), var(--navy-800));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: none;
  flex-direction: column;
  overflow: hidden;
}
#support-panel.is-open { display: flex; }
.support-panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
}
.support-head-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.1);
}
.support-panel-head h3 { margin: 0 0 4px; font-size: 1rem; color: #fff; }
.support-panel-head p { margin: 0; font-size: 0.8rem; color: var(--ink-mute); }
.support-panel-body { padding: 12px 14px 14px; }
.support-thread {
  padding: 14px 14px 4px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.support-row-bot {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 92%;
  align-self: flex-start;
}
.support-msg-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}
.support-msg {
  max-width: 84%;
  padding: 10px 13px;
  border-radius: 14px;
  font-size: 0.87rem;
  line-height: 1.55;
}
.support-msg-user {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-dark) 100%);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.support-msg-bot {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  border-bottom-left-radius: 4px;
}
.support-msg-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  width: 100%;
  text-align: center;
}
.support-typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 13px 15px;
}
.support-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-mute);
  animation: support-typing-bounce 1.2s infinite;
}
.support-typing span:nth-child(2) { animation-delay: 0.15s; }
.support-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes support-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}
.support-ask {
  display: flex;
  gap: 8px;
}
.support-ask input {
  flex: 1;
  min-width: 0;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--ink);
  font-family: "Nunito Sans", Arial, sans-serif;
  font-size: 0.85rem;
}
.support-ask input::placeholder { color: var(--ink-mute); }
.support-ask button {
  flex-shrink: 0;
  width: 40px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-dark) 100%);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.support-ask button svg { width: 16px; height: 16px; }
.support-panel-foot {
  padding: 14px 16px;
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
}
.support-panel-foot p { margin: 0 0 10px; font-size: 0.78rem; color: var(--ink-mute); }
.support-contact-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  text-align: center;
}
@media (max-width: 480px) {
  #support-toggle { left: 16px; bottom: 16px; }
  #support-panel { left: 16px; bottom: 84px; }
}

/* Cookie consent banner */
.cookie-banner {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 900;
  max-width: 560px;
  background: linear-gradient(160deg, var(--blue-800), var(--navy-800));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 24px;
  display: none;
}
.cookie-banner.is-visible { display: block; }
.cookie-banner p { color: var(--ink-soft); font-size: 0.88rem; line-height: 1.6; margin: 0 0 16px; }
.cookie-banner a { color: var(--blue-glow); font-weight: 600; }
.cookie-banner-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-banner-actions .btn { font-size: 0.85rem; padding: 10px 18px; }
.js-map-wrap { position: relative; }
.js-map-wrap .js-map-iframe { display: none; }
.js-map-wrap.is-loaded .js-map-iframe { display: block; }
.js-map-wrap.is-loaded .map-consent-placeholder { display: none; }
.map-consent-placeholder {
  height: 280px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}
.map-consent-placeholder p { color: var(--ink-mute); font-size: 0.85rem; margin: 0 0 12px; }
.map-consent-placeholder--sm {
  height: 120px;
  padding: 10px;
  border-radius: 8px;
}
.map-consent-placeholder--sm p { font-size: 0.72rem; margin: 0 0 8px; }
.map-enable-btn {
  font-family: "Nunito Sans", Arial, sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  color: #fff;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
}
.map-enable-btn:hover { background: rgba(255,255,255,0.16); }

/* Responsive */

@media (max-width: 860px) {
  .service-grid { grid-template-columns: 1fr; }
  .about-inner, .contact-inner { grid-template-columns: 1fr; }
  .hours-card { margin-top: 24px; }
  .engagements-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-map { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .engagements-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .main-nav {
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: rgba(11, 12, 23, 0.97);
    backdrop-filter: blur(14px);
    flex-direction: column;
    padding: 12px 24px 20px;
    gap: 4px;
    display: none;
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 10px 0; border-top: 1px solid var(--line); }
  .main-nav a:first-child { border-top: none; }
  .header-cta { display: none; }
  .nav-toggle { display: flex; }
  .hero { padding: 110px 0 100px; min-height: 460px; }
  .services, .about, .contact { padding: 72px 0; }

  /* "Vente de pièces" dropdown: no hover on touch, so the category links
     just sit open, indented, under the link instead. */
  .nav-item { flex-direction: column; align-items: stretch; border-top: 1px solid var(--line); }
  .nav-item > a { border-top: none; }
  .nav-item::after { display: none; }
  .nav-dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    background: none;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    padding: 0 0 8px 14px;
  }
  .nav-dropdown a { padding: 7px 0 !important; color: var(--ink-mute); }
}