/* ============================================================
   Super Serrurier Genève — tokens du design system + page
   ============================================================ */

:root {
  /* Typographie */
  --font-display: "Familjen Grotesk", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, sans-serif;
  --fs-hero: clamp(38px, 4.5vw, 56px);
  --fs-h2: clamp(28px, 3vw, 38px);
  --fs-h3: 22px;
  --fs-h4: 18px;
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-small: 14px;
  --lh-tight: 1.1;
  --lh-heading: 1.2;
  --lh-body: 1.6;
  --fw-heading: 700;
  --fw-hero: 800;
  --fw-medium: 500;
  --fw-semibold: 600;
  --tracking-heading: -0.01em;
  --tracking-caps: 0.08em;

  /* Encre */
  --ink-900: #0F2438; --ink-800: #17324A; --ink-700: #23445F; --ink-500: #526E88;
  --ink-400: #8298AC; --ink-300: #AEC0D0; --ink-200: #C8D6E2; --ink-100: #E3EAF2;

  /* Surfaces */
  --paper: #F5F6F3; --surface: #FFFFFF; --surface-card: #FFFFFF; --surface-alt: #E9EFF5;

  /* Accent bleu acier */
  --steel-700: #1B5C88; --steel-600: #2377AC; --steel-500: #2E8FCB;
  --steel-100: #D3E9F8; --steel-50: #EEF6FC;

  /* Accent secondaire (bleu clair) */
  --brass-500: #8ED0F5; --brass-600: #63B9EC; --brass-100: #DFF1FC;

  /* CTA */
  --cta-bg: #F2606B;
  --cta-bg-hover: #E84E5A;
  --cta-fg: #FFFFFF;
  --cta-shadow: 0 8px 18px -8px rgba(242, 96, 107, .55);

  /* Sémantique */
  --success: #2F7D5B;
  --error: #B4554F;
  --text-body: var(--ink-700);
  --text-heading: var(--ink-900);
  --text-muted: var(--ink-500);
  --text-on-dark: #F4F6F9;
  --text-on-dark-muted: #B8C2CF;
  --surface-page: var(--paper);
  --accent: var(--steel-500);
  --accent-hover: var(--steel-700);
  --accent-soft: var(--steel-50);
  --highlight: var(--brass-500);
  --border-subtle: var(--ink-100);
  --border-strong: var(--ink-200);
  --focus-ring: 0 0 0 3px var(--steel-100);

  /* Effets */
  --radius-card: 16px;
  --radius-btn: 10px;
  --radius-input: 10px;
  --radius-pill: 999px;
  --radius-img: 20px;
  --shadow-card: 0 2px 8px rgba(31, 43, 58, .06), 0 12px 32px rgba(31, 43, 58, .08);
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur: 180ms;

  /* Espacement */
  --container-max: 1140px;
  --container-pad: 24px;
}

/* ============ Base ============ */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-heading);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
  margin: 0;
}

a { color: var(--steel-600); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--steel-700); }
::selection { background: var(--steel-100); }

button { font-family: inherit; }

@keyframes ss-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.82); }
}

.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }
.container--narrow { max-width: 860px; margin: 0 auto; padding: 0 var(--container-pad); }

/* Compense l'en-tête collant lors des ancres */
#urgence, #tarifs, #faq, #triage { scroll-margin-top: 90px; }
@media (max-width: 880px) {
  #urgence, #tarifs, #faq, #triage { scroll-margin-top: 130px; }
}

/* Écrans intermédiaires : on masque le bouton WhatsApp de la barre */
@media (max-width: 1180px) and (min-width: 881px) {
  .header-ctas .btn--ghost-brass { display: none; }
  .main-nav { gap: 14px; }
}

/* ============ Kickers & titres de section ============ */

.kicker {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.kicker--brass { color: var(--brass-600); }
.kicker--on-dark { color: var(--brass-500); }
.kicker--steel { color: var(--steel-700); }

.section-title {
  font-weight: 800;
  font-size: 30px;
  line-height: 1.16;
  letter-spacing: 0;
  text-transform: uppercase;
  margin: 12px 0 0;
}

.section-lead { font-size: 17px; color: var(--text-muted); margin: 12px 0 0; }

/* ============ Boutons ============ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  border-radius: var(--radius-pill);
  cursor: pointer;
  border: none;
  transition: all var(--dur) var(--ease);
  line-height: var(--lh-body);
}

.btn--cta {
  background: var(--cta-bg);
  color: var(--cta-fg);
  box-shadow: var(--cta-shadow);
}
.btn--cta:hover { background: var(--cta-bg-hover); color: var(--cta-fg); }
.btn--cta:active { transform: translateY(1px); }

.btn--lg { font-size: 17px; padding: 16px 28px; }
.btn--xl { font-size: 18px; padding: 18px 32px; }
.btn--md { font-size: 16px; padding: 15px 20px; }
.btn--nav { font-size: 14px; padding: 9px 16px; white-space: nowrap; }

/* ============ Éléments d'état ============ */

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7BE3A6;
  animation: ss-pulse 1.8s infinite;
  flex-shrink: 0;
}

/* Sélecteur de langue (menu déroulant avec drapeaux) */
.lang-menu { position: relative; }

.lang-menu__current {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--brass-500);
  padding: 6px 10px;
  border: 1px solid var(--ink-700);
  border-radius: var(--radius-pill);
  transition: border-color var(--dur) var(--ease);
  user-select: none;
}
.lang-menu__current::-webkit-details-marker { display: none; }
.lang-menu__current:hover { border-color: var(--brass-500); }

/* Tout à droite de la barre (centré verticalement sur PC) */
.site-header .lang-menu { position: absolute; top: 50%; right: 20px; transform: translateY(-50%); }
.lang-menu[open] .lang-menu__current svg { transform: rotate(180deg); }
.lang-menu__current svg { transition: transform var(--dur) var(--ease); }

.lang-flag { border-radius: 2px; flex-shrink: 0; display: block; }

.lang-menu__list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 150px;
  background: var(--ink-800);
  border: 1px solid var(--ink-700);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lang-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--text-on-dark);
  padding: 8px 10px;
  border-radius: 8px;
  transition: background var(--dur) var(--ease);
}
a.lang-menu__item:hover { background: var(--ink-700); color: #fff; }
.lang-menu__item.is-active { color: var(--brass-500); }
.lang-menu__item.is-disabled { color: var(--ink-500); cursor: default; }
.lang-menu__item.is-disabled .lang-flag { opacity: .45; }

/* ============ En-tête collant ============ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink-900);
  border-bottom: 1px solid var(--ink-800);
}

/* Une seule ligne sur PC : logo à gauche, navigation au centre,
   boutons à droite, sélecteur de langue tout à droite. */
.site-header__inner {
  position: relative;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 17px 118px 17px 24px; /* espace réservé à droite pour la langue */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* Bouton menu (mobile uniquement) */
.nav-burger {
  display: none;
  position: absolute;
  top: 16px;
  left: 20px;
  align-items: center;
  gap: 7px;
  background: none;
  border: 1px solid var(--ink-700);
  border-radius: var(--radius-pill);
  color: var(--text-on-dark);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  padding: 7px 12px;
  cursor: pointer;
}
.nav-burger[aria-expanded="true"] { border-color: var(--brass-500); color: var(--brass-500); }

.logo {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  border: none;
  background: none;
  padding: 0;
  flex-shrink: 0;
}
.logo__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: #fff;
  white-space: nowrap;
}
.logo__tag {
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass-500);
  margin-top: 4px;
  white-space: nowrap;
}

.site-header__row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
  flex-wrap: nowrap;
  min-width: 0;
}

.main-nav { display: flex; gap: 18px; font-family: var(--font-display); font-weight: 600; font-size: 14px; flex-wrap: nowrap; align-items: center; }
.main-nav a,
.main-nav button {
  cursor: pointer;
  color: var(--text-on-dark);
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  transition: color var(--dur) var(--ease);
}
.main-nav a:hover,
.main-nav button:hover { color: var(--brass-500); }

/* Menus déroulants Nos urgences / Zones */
.nav-item { position: relative; }
.nav-item__toggle { display: inline-flex; align-items: center; gap: 6px; }
.nav-item__toggle svg { transition: transform var(--dur) var(--ease); }
.nav-item.is-open .nav-item__toggle svg { transform: rotate(180deg); }
.nav-item.is-open .nav-item__toggle { color: var(--brass-500); }

.nav-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  min-width: 240px;
  background: var(--ink-800);
  border: 1px solid var(--ink-700);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
}
.nav-item.is-open .nav-dropdown { display: block; }

.nav-dropdown a {
  display: block;
  font-size: 14px;
  padding: 8px 12px;
  border-radius: 8px;
  white-space: nowrap;
}
.nav-dropdown a:hover { background: var(--ink-700); color: #fff; }

.nav-dropdown--wide {
  min-width: 420px;
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 0 8px;
}
.nav-item.is-open .nav-dropdown--wide { display: grid; }

.header-ctas { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }

.btn--ghost-brass {
  background: transparent;
  color: #fff;
  font-size: 14px;
  padding: 8px 14px;
  border: 1.5px solid var(--brass-500);
  white-space: nowrap;
}
.btn--ghost-brass:hover { background: var(--ink-800); color: #fff; }

.btn--ghost-dark {
  background: transparent;
  color: var(--text-on-dark);
  font-size: 15px;
  padding: 10px 18px;
  border: 1.5px solid var(--ink-700);
}
.btn--ghost-dark:hover { border-color: #fff; color: #fff; }

/* ============ Boutons flottants (mobile) ============ */

.fab-stack {
  display: none;
  position: fixed;
  right: 14px;
  bottom: 18px;
  z-index: 80;
  flex-direction: column;
  gap: 10px;
}

.fab {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 6px 18px rgba(15, 36, 56, .35);
  transition: transform var(--dur) var(--ease);
}
.fab:active { transform: scale(.94); }
.fab:hover { color: #fff; }
.fab--phone { background: var(--cta-bg); }
.fab--whatsapp { background: #25D366; }
.fab--form { background: var(--ink-900); }

/* ============ Héros ============ */

.hero {
  position: relative;
  background: var(--steel-100);
  color: var(--text-body);
  padding: 88px 0 96px;
  overflow: hidden;
}

.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(211, 233, 248, .97) 0%, rgba(211, 233, 248, .93) 42%, rgba(211, 233, 248, .74) 70%, rgba(211, 233, 248, .48) 100%);
  pointer-events: none;
}

.hero__content {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--steel-500);
  border-radius: var(--radius-pill);
  padding: 8px 15px;
  font-size: 13px;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--steel-700);
}

.hero__title {
  font-weight: 800;
  font-size: 44px;
  line-height: 1.08;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--ink-900);
  margin: 22px 0 0;
  text-wrap: pretty;
}

/* Note Google dans le héros */
.hero__google {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
}
.hero__google[hidden] { display: none; }
a.hero__google { transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
a.hero__google:hover { box-shadow: 0 6px 18px rgba(15, 36, 56, .15); transform: translateY(-1px); }
.hero__google-text { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink-900); }

.hero__lead { font-size: 18px; line-height: 1.6; margin: 22px auto 0; max-width: 640px; text-wrap: pretty; }
.hero__sub { font-size: 17px; line-height: 1.6; margin: 14px auto 0; max-width: 640px; }

.hero__ctas { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; justify-content: center; }

.btn--hero-alt {
  background: var(--surface);
  color: var(--ink-900);
  font-size: 17px;
  padding: 15px 28px;
  border: 2px solid var(--steel-500);
}
.btn--hero-alt:hover { border-color: var(--steel-700); background: var(--steel-50); color: var(--ink-900); }

.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 48px;
  width: 100%;
  max-width: 720px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-card);
  padding: 24px 28px;
  text-align: left;
}

.hero-stat { display: flex; flex-direction: column; gap: 6px; }
.hero-stat__value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--steel-700);
}
.hero-stat__label { font-size: 14px; line-height: 1.35; color: var(--ink-500); }

/* ============ Bandeau assureurs ============ */

.insurers { background: var(--surface); border-bottom: 1px solid var(--border-subtle); padding: 34px 0; }

.insurers__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  justify-content: space-between;
}

.insurers__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.insurers__logos {
  display: flex;
  gap: 30px;
  row-gap: 20px;
  flex-wrap: wrap;
  align-items: center;
}

.insurer-logo {
  max-height: 38px;
  max-width: 128px;
  width: auto;
  height: auto;
  object-fit: contain;
}

@media (max-width: 620px) {
  .insurers__logos { gap: 20px; row-gap: 16px; justify-content: center; }
  .insurer-logo { max-height: 30px; max-width: 104px; }
}

/* ============ Section urgence (triage) ============ */

.section { padding: 96px 0; }
.section--surface { background: var(--surface); }
.section--paper { background: var(--paper); }
.section--steel { background: var(--steel-100); }
.section--surface-bt { background: var(--surface); border-top: 1px solid var(--border-subtle); }

.urgence__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 34px;
}
.urgence__head-text { max-width: 640px; }

/* Formulaire de triage : estimation à droite sur PC, en bas sur mobile */
.triage {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  scroll-margin-top: 150px;
}

.triage__form { padding: 40px; }

.triage-step { display: flex; align-items: center; gap: 12px; }
.triage-step + * { margin-top: 18px; }
.triage-step--second { margin-top: 34px; }

.triage-step__num {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-card);
  background: var(--ink-900);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.triage-step__label { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--text-heading); }

.problem-chips { display: flex; flex-wrap: wrap; gap: 10px; }

/* Sélecteur déroulant du triage (mobile) */
.problem-select {
  display: none;
  width: 100%;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--text-heading);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-card);
  padding: 14px 16px;
  appearance: auto;
}

.chip {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  padding: 11px 18px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  background: var(--surface);
  color: var(--text-heading);
  border: 1px solid var(--border-strong);
}
.chip.is-active {
  background: var(--ink-900);
  color: #fff;
  border-color: var(--ink-900);
  box-shadow: 0 8px 18px -8px rgba(15, 36, 56, .45);
}

.triage__inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.input {
  font-family: var(--font-body);
  font-size: 16px;
  padding: 15px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text-heading);
  outline: none;
  width: 100%;
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.input:focus { border-color: var(--steel-500); box-shadow: var(--focus-ring); }

.input--dark {
  border-color: var(--ink-700);
  background: var(--ink-900);
  color: #fff;
}
.input--dark::placeholder { color: var(--ink-400); }

.triage__actions { display: flex; gap: 14px; align-items: center; margin-top: 20px; flex-wrap: wrap; }
.triage__note { margin: 18px 0 0; font-size: 14px; color: var(--text-muted); }

.form-confirm { margin: 18px 0 0; font-size: 15px; color: var(--success); font-weight: 600; display: none; }
.form-confirm.is-visible { display: block; }
.form-confirm--on-dark { color: #9DEBBF; margin-top: 16px; }

/* Panneau estimation */
.estimate {
  background: var(--ink-900);
  color: var(--text-on-dark);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.estimate__row-label { font-size: 13px; color: var(--text-on-dark-muted); }
.estimate__title { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: #fff; margin-top: 6px; }
.estimate__block { border-top: 1px solid var(--ink-800); padding-top: 20px; }
.estimate__delay { font-family: var(--font-display); font-weight: 800; font-size: 34px; color: var(--brass-500); line-height: 1.1; margin-top: 4px; }
.estimate__price { font-family: var(--font-display); font-weight: 800; font-size: 34px; color: #fff; line-height: 1.1; margin-top: 4px; }
.estimate__note { font-size: 13px; color: var(--text-on-dark-muted); margin-top: 8px; }

/* ============ Services ============ */

.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }

.service-card {
  cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
  font-family: var(--font-body);
  font-size: inherit;
  transition: border-color var(--dur) var(--ease);
}
.service-card:hover { border-color: var(--steel-500); }

.service-card__top { display: flex; align-items: center; justify-content: space-between; }
.service-card__num { font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: .1em; color: var(--brass-600); }
.service-card__price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--accent);
  background: var(--steel-50);
  padding: 5px 10px;
  border-radius: var(--radius-card);
}
.service-card__title { font-weight: 700; font-size: 20px; margin: 6px 0 0; }
.service-card__text { font-size: 15px; line-height: 1.55; color: var(--text-body); margin: 0; }
.service-card__more { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--accent); margin-top: 6px; }

/* ============ Étapes & promesses ============ */

.process { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: start; }

.process__lead { font-size: 17px; color: var(--text-muted); margin: 14px 0 0; }
.step-list { display: flex; flex-direction: column; gap: 22px; margin-top: 32px; }

/* Composant StepItem (design system) */
.step-item { display: flex; gap: 16px; align-items: flex-start; }
.step-item__num {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--steel-700);
  font-family: var(--font-display);
  font-weight: var(--fw-heading);
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.step-item p { margin: 6px 0 0; }
.step-item strong { color: var(--text-heading); }

.promise-card { background: var(--surface-alt); border-radius: var(--radius-card); padding: 36px; }
.promise-card__title { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--text-heading); }
.promise-card__list { display: flex; flex-direction: column; gap: 18px; margin-top: 24px; }

/* Composant ArrowItem (design system) */
.arrow-item { display: flex; gap: 16px; align-items: flex-start; }
.arrow-item svg { flex-shrink: 0; margin-top: 4px; }
.arrow-item p { margin: 0; }
.arrow-item strong { color: var(--text-heading); }

/* ============ Tarifs ============ */

.tariffs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }

.tariff-card {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tariff-card__kicker {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brass-600);
}
.tariff-card__price { font-family: var(--font-display); font-weight: 800; font-size: 34px; color: var(--text-heading); line-height: 1; }
.tariff-card__note { font-size: 15px; color: var(--text-muted); }
.tariff-card__sep { height: 1px; background: var(--border-subtle); }
.tariff-card__rows { display: flex; flex-direction: column; gap: 10px; }
.tariff-row { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.tariff-row span:last-child { font-family: var(--font-display); font-weight: 700; color: var(--text-heading); white-space: nowrap; }

.tariffs-disclaimer { font-size: 14px; color: var(--text-muted); margin: 22px 0 0; }

/* ============ Avis ============ */

.reviews__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.reviews__head-text { max-width: 640px; }

.rating-badge {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: 14px 20px;
}
.rating-badge__score { font-family: var(--font-display); font-weight: 800; font-size: 30px; color: var(--text-heading); }
.rating-badge__label { font-size: 14px; color: var(--text-muted); line-height: 1.4; }

.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }

.review-card {
  background: var(--paper);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.review-card__mark { font-family: var(--font-display); font-weight: 800; font-size: 30px; color: var(--brass-500); line-height: .6; }
.review-card__text { font-size: 16px; line-height: 1.6; color: var(--text-body); margin: 0; }
.review-card__author { font-size: 14px; color: var(--text-muted); margin-top: auto; }

/* ============ Box d'avis Google ============ */

.gr-badge { display: flex; align-items: center; gap: 14px; }
.gr-badge__logo { flex-shrink: 0; }
.gr-badge__row { display: flex; align-items: center; gap: 10px; }

.gr-stars { display: inline-flex; align-items: center; gap: 2px; }

.gr-viewport { overflow: hidden; margin-top: 40px; }
.gr-viewport.is-static { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.gr-track { display: flex; gap: 20px; transition: transform 500ms var(--ease); }

.gr-card { flex: 0 0 calc((100% - 40px) / 3); }

.gr-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gr-card__author { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--text-heading); }
.gr-card__date { font-size: 13px; color: var(--text-muted); margin-top: 2px; }

.gr-actions { display: flex; align-items: center; gap: 20px; margin-top: 32px; flex-wrap: wrap; }
.gr-actions .btn { font-size: 16px; padding: 14px 24px; }
.gr-all-link { font-family: var(--font-display); font-weight: 600; font-size: 15px; }

@media (max-width: 1000px) {
  .gr-card { flex-basis: calc((100% - 20px) / 2); }
}
@media (max-width: 620px) {
  .gr-card { flex-basis: 100%; }
}

/* ============ Zones ============ */

.zones-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }

.zone-card { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); padding: 28px; }
.zone-card__title { font-weight: 700; font-size: 20px; margin: 0; }
.zone-card__lead { font-size: 15px; color: var(--text-muted); margin: 10px 0 0; }
.zone-card__places { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

.place-chip {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--text-heading);
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-card);
  padding: 7px 14px;
  transition: all var(--dur) var(--ease);
}
.place-chip:hover { border-color: var(--steel-500); color: var(--accent); }

/* ============ FAQ (composant FAQItem) ============ */

.faq-list { margin-top: 32px; }

.faq-item { border-bottom: 1px solid var(--border-subtle); }

.faq-item__toggle {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 4px;
  text-align: left;
}
.faq-item__question {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-lg);
  color: var(--text-heading);
}
.faq-item__chevron { flex-shrink: 0; transition: transform var(--dur) var(--ease); }
.faq-item.is-open .faq-item__chevron { transform: rotate(180deg); }

.faq-item__answer { padding: 0 4px 18px; color: var(--text-body); display: none; }
.faq-item.is-open .faq-item__answer { display: block; }

/* ============ CTA final ============ */

.final-cta { background: var(--ink-900); color: var(--text-on-dark); padding: 88px 0; }
.final-cta__inner { max-width: 860px; margin: 0 auto; padding: 0 24px; text-align: center; }
.final-cta__title {
  font-weight: 800;
  font-size: 33px;
  line-height: 1.14;
  text-transform: uppercase;
  color: #fff;
  margin: 14px 0 0;
}
.final-cta__lead { font-size: 18px; color: var(--text-on-dark-muted); margin: 16px auto 0; max-width: 600px; }
.final-cta__ctas { display: flex; gap: 14px; justify-content: center; margin-top: 32px; flex-wrap: wrap; }

.btn--outline-on-dark {
  color: #fff;
  background: transparent;
  font-size: 18px;
  padding: 16px 30px;
  border: 2px solid var(--ink-700);
}
.btn--outline-on-dark:hover { border-color: var(--brass-500); color: #fff; }

/* ============ Pages internes (urgence / commune) ============ */

.subpage-hero { background: var(--surface); border-bottom: 1px solid var(--border-subtle); padding: 64px 0 72px; }

.breadcrumb { font-size: 14px; color: var(--text-muted); }
.breadcrumb span { color: var(--text-heading); }

.subpage-hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; margin-top: 28px; align-items: start; }

.subpage-hero__title {
  font-weight: 800;
  font-size: 46px;
  line-height: 1.06;
  letter-spacing: -0.035em;
  margin: 14px 0 0;
}
.subpage-hero__lead { font-size: 18px; line-height: 1.6; color: var(--text-body); margin: 18px 0 0; }
.subpage-hero__sub { font-size: 17px; line-height: 1.6; color: var(--text-body); margin: 14px 0 0; }
.subpage-hero__ctas { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }

.btn--outline-light {
  color: var(--text-heading);
  background: transparent;
  font-size: 17px;
  padding: 14px 26px;
  border: 2px solid var(--ink-200);
}
.btn--outline-light:hover { border-color: var(--ink-400); color: var(--text-heading); }

/* Fiche intervention (page urgence) */
.intervention-card {
  background: var(--paper);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: 32px;
}
.intervention-card__rows { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; }
.intervention-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 14px;
}
.intervention-row:last-child { border-bottom: none; padding-bottom: 0; }
.intervention-row span:first-child { color: var(--text-muted); font-size: 15px; }
.intervention-row span:last-child { font-family: var(--font-display); font-weight: 700; color: var(--text-heading); }
.intervention-row .is-included { color: var(--success); }

/* Détails page urgence */
.service-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.service-detail h2 { font-weight: 800; font-size: 32px; line-height: 1.12; margin: 0; }
.service-detail__list { display: flex; flex-direction: column; gap: 18px; margin-top: 24px; }

.callout-banner {
  background: var(--ink-900);
  color: var(--text-on-dark);
  border-radius: var(--radius-card);
  padding: 26px;
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.callout-banner__text { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: #fff; }
.callout-banner .btn { white-space: nowrap; font-size: 16px; padding: 14px 22px; }

/* Fiche commune */
.commune-stats-card {
  background: var(--ink-900);
  color: var(--text-on-dark);
  border-radius: var(--radius-card);
  padding: 32px;
}
.commune-stats-card__delay { font-family: var(--font-display); font-weight: 800; font-size: 40px; color: var(--brass-500); margin-top: 16px; line-height: 1; }
.commune-stats-card__caption { font-size: 14px; color: var(--text-on-dark-muted); margin-top: 6px; }
.commune-stats-card__rows {
  border-top: 1px solid var(--ink-800);
  margin-top: 22px;
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.commune-stat-row { display: flex; justify-content: space-between; font-size: 15px; }
.commune-stat-row span:first-child { color: var(--text-on-dark-muted); }
.commune-stat-row span:last-child { font-family: var(--font-display); font-weight: 700; color: #fff; }

.spots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.spot-chip {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--text-heading);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-card);
  padding: 8px 15px;
}

.commune-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.commune-service-card {
  cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: 26px;
  text-align: left;
  font-family: var(--font-body);
  font-size: inherit;
  transition: border-color var(--dur) var(--ease);
}
.commune-service-card:hover { border-color: var(--steel-500); }
.commune-service-card__title { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--text-heading); }
.commune-service-card__text { font-size: 15px; color: var(--text-body); margin: 10px 0 0; }
.commune-service-card__price { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--accent); margin-top: 14px; }

/* ============ Formulaire de devis ============ */

.form-card {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: 36px;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.form-honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.form-field { display: flex; flex-direction: column; gap: 7px; }
.form-field label,
.form-field__legend {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--text-heading);
}

textarea.input { resize: vertical; min-height: 120px; font-family: var(--font-body); }
select.input { appearance: auto; }
.input--file { padding: 11px 14px; font-size: 14px; }

.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin-top: 4px; }
.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: var(--text-body);
  cursor: pointer;
}
.check input { width: 17px; height: 17px; margin-top: 3px; accent-color: var(--steel-500); flex-shrink: 0; }

.form-consent { font-size: 14px; color: var(--text-muted); }

.form-submit { align-self: flex-start; }

.form-note { font-size: 14px; color: var(--text-muted); margin: 0; }

.form-error {
  display: none;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--error);
  background: #FBEFEE;
  border: 1px solid #EBCFCC;
  border-radius: var(--radius-input);
  padding: 12px 16px;
}
.form-error.is-visible { display: block; }

.form-card .form-confirm {
  margin: 0;
  background: var(--steel-50);
  border: 1px solid var(--steel-100);
  border-radius: var(--radius-input);
  padding: 12px 16px;
}

@media (max-width: 620px) {
  .form-card { padding: 24px 18px; }
  .form-grid, .checks { grid-template-columns: 1fr; }
  .form-submit { align-self: stretch; }
}

/* ============ Pied de page ============ */

.site-footer { background: var(--ink-900); color: var(--text-on-dark); padding: 72px 0 32px; }

.site-footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; }

.site-footer__brand-name { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: #fff; }
.site-footer__about { font-size: 15px; color: var(--text-on-dark-muted); margin: 14px 0 0; }
.site-footer__address { font-size: 15px; color: var(--text-on-dark-muted); margin-top: 18px; line-height: 1.7; }
.site-footer__address a { color: var(--brass-500); }
.site-footer__address a:hover { color: var(--brass-100); }

.site-footer__col-title { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: #fff; }
.site-footer__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  font-size: 15px;
  color: var(--text-on-dark-muted);
}
.site-footer__links a,
.site-footer__links button {
  cursor: pointer;
  color: var(--text-on-dark-muted);
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  text-align: left;
  transition: color var(--dur) var(--ease);
}
.site-footer__links a:hover,
.site-footer__links button:hover { color: var(--brass-500); }

.site-footer__bottom {
  border-top: 1px solid var(--ink-800);
  margin-top: 48px;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--ink-400);
}

/* ============ Responsive ============ */

@media (max-width: 1000px) {
  .services-grid, .tariffs-grid, .reviews-grid, .zones-grid, .commune-services { grid-template-columns: repeat(2, 1fr); }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 880px) {
  .section { padding: 72px 0; }
  .hero { padding: 64px 0 72px; }

  /* Menu accordéon */
  .nav-burger { display: inline-flex; }
  .site-header__inner { flex-direction: column; align-items: center; padding: 14px 24px 12px; }
  .site-header .lang-menu { top: 16px; transform: none; }
  .site-header .logo { align-items: center; margin-top: 38px; }
  .logo__name { font-size: 22px; }
  .logo__tag { font-size: 10px; letter-spacing: .14em; }
  .site-header__row { display: none; width: 100%; }
  .site-header__row.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
  .main-nav { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .main-nav > a { padding: 13px 4px; border-bottom: 1px solid var(--ink-800); }
  .nav-item { border-bottom: 1px solid var(--ink-800); }
  .nav-item__toggle { width: 100%; justify-content: space-between; padding: 13px 4px; }
  .nav-dropdown,
  .nav-item.is-open .nav-dropdown {
    position: static;
    transform: none;
    min-width: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0 0 10px 14px;
  }
  .nav-dropdown--wide, .nav-item.is-open .nav-dropdown--wide { grid-template-columns: 1fr; }
  .nav-dropdown a { white-space: normal; color: var(--text-on-dark-muted); }

  /* CTA de l'en-tête remplacés par les boutons flottants */
  .header-ctas { display: none; }
  .fab-stack { display: flex; }
  .triage { grid-template-columns: 1fr; }
  .process, .service-detail, .subpage-hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .hero__title { font-size: 36px; }
  .subpage-hero__title { font-size: 38px; }
}

@media (max-width: 620px) {
  .services-grid, .tariffs-grid, .reviews-grid, .zones-grid, .commune-services { grid-template-columns: 1fr; }
  .problem-chips { display: none; }
  .problem-select { display: block; }
  .hero__stats { grid-template-columns: 1fr; gap: 18px; }
  .triage__form, .estimate { padding: 28px 22px; }
  .triage__inputs { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .hero__title { font-size: 30px; }
  .subpage-hero__title { font-size: 32px; }
  .section-title { font-size: 26px; }
}