/* ==========================================================================
   Proglass — style.css

   Design signature : la fracture d'impact.
   Un pare-brise Proglass se répare à cause d'un point d'impact réel — le
   motif de fêlure (voir .fracture) est le seul élément graphique récurrent
   du site, utilisé comme séparateur de section et comme icône du service
   "Réparation d'impact". Tout le reste reste sobre autour de lui.

   Palette officielle de la marque (logo vectoriel Proglass) :
   encre #0D1B2A / bleu de marque #0081B6 / ciel verre #4FC7EF
   Typo    : Syne (titres) / Inter (texte) / IBM Plex Mono (repères chiffrés :
   numéros, codes départements, statistiques — un clin d'œil aux instruments
   de mesure du métier : jauges de calibration ADAS, épaisseurs de vitrage)
   ========================================================================== */

:root {
  --navy: #0D1B2A;
  --blue: #0081B6;
  --blue-dark: #045E82;
  --accent: #4FC7EF;
  --accent-dark: #22A6D6;
  --white: #FFFFFF;
  --gray-light: #EFF6F9;
  --stone: #8A98A3;
  --text-main: #1E293B;
  --text-muted: #64748B;
  --border-light: #E2E8F0;

  --font-title: 'Syne', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --radius: 12px;
  --transition: 0.2s ease;
  --header-height: 72px;
}

@media (prefers-reduced-motion: reduce) {
  * , *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Reset ---------- */
* , *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

body {
  font-family: var(--font-body);
  color: var(--text-main);
  background: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
  padding-bottom: 76px; /* espace pour le bouton flottant mobile */
}

img {
  max-width: 100%;
  display: block;
}

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

ul {
  list-style: none;
}

h1, h2, h3, h4 {
  font-family: var(--font-title);
  font-weight: 800;
  line-height: 1.2;
  color: var(--navy);
  hyphens: none;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.25rem; }

p { color: var(--text-muted); }

.container {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 20px;
}

.section {
  padding: 64px 0;
}

.section-dark {
  background: var(--navy);
  color: var(--white);
}

.section-dark h2,
.section-dark h3 {
  color: var(--white);
}

.section-dark p {
  color: #B8C4D4;
}

.section-alt {
  background: var(--gray-light);
}

.section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 40px;
}

.section-header .eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 12px;
}

.section-dark .section-header .eyebrow {
  color: var(--accent);
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  min-height: 48px;
  border-radius: 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition);
  white-space: nowrap;
}

.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background: var(--accent);
  color: var(--navy);
  box-shadow: 0 4px 14px rgba(79, 199, 239, 0.35);
}

.btn-primary:hover {
  background: var(--accent-dark);
}

.btn-secondary {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.4);
}

.btn-secondary:hover {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.08);
}

.btn-outline {
  background: transparent;
  color: var(--blue);
  border-color: var(--blue);
}

.btn-outline:hover {
  background: var(--blue);
  color: var(--white);
}

.btn-block {
  width: 100%;
}

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  background: rgba(13, 27, 42, 0.98);
  z-index: 100;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: box-shadow var(--transition);
}

.site-header.is-scrolled {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.site-header.is-scrolled .logo-link img {
  transform: scale(0.86);
}

.header-inner {
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.logo-link {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.logo-link img {
  height: 42px;
  width: auto;
  transition: transform var(--transition);
}

.logo-fallback {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--white);
}

.main-nav {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--navy);
  display: flex;
  flex-direction: column;
  padding: 24px 20px;
  gap: 4px;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  overflow-y: auto;
}

.main-nav.is-open {
  transform: translateX(0);
}

.main-nav a {
  color: var(--white);
  font-weight: 600;
  padding: 16px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 1.05rem;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-call {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: var(--navy);
  font-weight: 700;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.9rem;
  white-space: nowrap;
}

.header-call:hover {
  background: var(--accent-dark);
}

.hamburger {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  transition: transform var(--transition), opacity var(--transition);
}

.hamburger.is-active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger.is-active span:nth-child(2) {
  opacity: 0;
}

.hamburger.is-active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Hero ---------- */
.hero {
  background:
    linear-gradient(160deg, rgba(13, 27, 42, 0.92) 0%, rgba(20, 42, 66, 0.94) 100%),
    url('../images/technicien-travail.jpg');
  background-size: cover;
  background-position: center;
  color: var(--white);
  padding: calc(var(--header-height) + 56px) 0 56px;
  text-align: center;
}

.hero h1 {
  color: var(--white);
  font-size: 2.1rem;
  margin-bottom: 16px;
}

.hero .subtitle {
  color: #C3D0E0;
  font-size: 1.05rem;
  max-width: 560px;
  margin: 0 auto 20px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(79, 199, 239, 0.15);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 8px 16px;
  border-radius: 999px;
  margin-bottom: 28px;
}

.hero-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
  max-width: 340px;
  margin: 0 auto;
}

.hero-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 480px;
  margin: 48px auto 0;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.hero-stat .stat-value {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 1.8rem;
  color: var(--accent);
}

.hero-stat .stat-label {
  font-size: 0.85rem;
  color: #B8C4D4;
}

.stat-pop {
  display: inline-block;
  animation: statPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes statPop {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ---------- Bandeau offre ---------- */
.offer-banner {
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-dark) 100%);
  color: var(--navy);
  padding: 20px 0;
}

.offer-banner .container {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  text-align: center;
}

.offer-banner p {
  color: var(--navy);
  font-weight: 700;
  font-size: 1rem;
  margin: 0;
}

.offer-banner .btn {
  background: var(--navy);
  color: var(--white);
  flex-shrink: 0;
}

.offer-banner .btn:hover {
  background: #16283C;
}

/* ---------- Services (cartes) ---------- */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 28px 24px;
  box-shadow: 0 2px 8px rgba(13, 27, 42, 0.04);
  transition: transform var(--transition), box-shadow var(--transition);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(13, 27, 42, 0.1);
}

.card .icon {
  font-size: 2rem;
  margin-bottom: 14px;
  transition: transform var(--transition);
}

.card:hover .icon {
  transform: scale(1.12) rotate(-4deg);
}

.card h3 {
  margin-bottom: 8px;
}

.card p {
  font-size: 0.95rem;
}

.card .card-diagram {
  width: 100%;
  border-radius: 8px;
  margin-top: 16px;
  border: 1px solid var(--border-light);
}

/* ---------- Showcase (véhicule / matériel) ---------- */
.showcase-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}

.showcase-grid img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(13, 27, 42, 0.15);
}

.showcase-text .eyebrow {
  display: inline-block;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 12px;
}

.showcase-text h2 {
  margin-bottom: 14px;
}

.showcase-text p {
  margin-bottom: 12px;
}

.showcase-grid.is-reverse .showcase-image {
  order: -1;
}

/* ---------- Galerie interventions ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.gallery-grid img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--border-light);
  transition: transform var(--transition), box-shadow var(--transition);
}

.gallery-grid img:hover {
  transform: scale(1.06);
  box-shadow: 0 12px 28px rgba(13, 27, 42, 0.3);
  position: relative;
  z-index: 2;
}

/* ---------- Offre détaillée ---------- */
.offer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 36px;
}

.offer-block {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  padding: 28px 24px;
  text-align: center;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.offer-block:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
}

.offer-block.is-main {
  background: rgba(79, 199, 239, 0.12);
  border-color: var(--accent);
}

.offer-block .icon {
  font-size: 2.2rem;
  margin-bottom: 12px;
  transition: transform var(--transition);
}

.offer-block:hover .icon,
.offer-block:hover .icon-wiper {
  transform: scale(1.12) rotate(-4deg);
}

.offer-block h3 {
  color: var(--white);
  margin-bottom: 8px;
}

.offer-cta {
  text-align: center;
}

/* ---------- Zones d'intervention ---------- */
.zone-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.zone-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 26px 22px;
}

.zone-card h3 {
  margin-bottom: 4px;
}

.zone-card .zone-code {
  color: var(--blue);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: block;
  margin-bottom: 14px;
}

.zone-card ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.zone-card li {
  font-size: 0.9rem;
}

.zone-card li a {
  color: var(--blue);
  font-weight: 600;
}

.zone-card li a:hover {
  text-decoration: underline;
}

.zone-city {
  background: var(--gray-light);
  padding: 4px 10px;
  border-radius: 6px;
  color: var(--text-main);
}

.zone-city.is-base {
  background: var(--navy);
  color: var(--white);
  font-weight: 700;
}

.zone-note {
  text-align: center;
  margin-top: 32px;
  font-weight: 600;
  color: var(--text-main);
}

/* ---------- Pourquoi nous ---------- */
.why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.why-item {
  text-align: center;
  padding: 12px;
}

.why-item .icon {
  font-size: 2rem;
  margin-bottom: 12px;
}

.why-item h3 {
  margin-bottom: 8px;
  font-size: 1.05rem;
}

.why-item p {
  font-size: 0.9rem;
}

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.contact-info .info-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.contact-info .icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}

.contact-info .info-item strong {
  display: block;
  color: var(--navy);
  font-size: 1rem;
}

.contact-info .info-item span,
.contact-info .info-item a {
  color: var(--text-muted);
  font-size: 0.95rem;
}

.contact-info .info-item a:hover {
  color: var(--blue);
}

.contact-card {
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius);
  padding: 36px 28px;
  text-align: center;
}

.contact-card h3 {
  color: var(--white);
  margin-bottom: 8px;
}

.contact-card p {
  color: #B8C4D4;
  margin-bottom: 24px;
}

.contact-card .btn {
  width: 100%;
}

.contact-card .mention {
  margin-top: 18px;
  font-size: 0.8rem;
  color: #8DA0B8;
}

.contact-card .no-advance {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  text-align: left;
}

.contact-card .no-advance img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

.contact-card .no-advance span {
  font-size: 0.85rem;
  color: #C3D0E0;
}

/* ---------- Footer ---------- */
.site-footer {
  background: #08131E;
  color: #B8C4D4;
  padding: 48px 0 24px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-bottom: 32px;
}

.footer-col h4 {
  color: var(--white);
  font-size: 0.95rem;
  margin-bottom: 14px;
}

.footer-col p {
  color: #8DA0B8;
  font-size: 0.9rem;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.footer-logo img {
  height: 36px;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col a {
  color: #B8C4D4;
  font-size: 0.9rem;
}

.footer-col a:hover {
  color: var(--accent);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 20px;
  text-align: center;
  font-size: 0.85rem;
  color: #6B7F97;
}

/* ---------- Bouton flottant mobile ---------- */
.floating-call {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  padding: 10px 16px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  background: rgba(13, 27, 42, 0.98);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.floating-call .btn {
  width: 100%;
}

.btn-pulse {
  position: relative;
}

.btn-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(79, 199, 239, 0.55);
  animation: btnPulse 2.4s ease-out infinite;
  pointer-events: none;
}

@keyframes btnPulse {
  0% { box-shadow: 0 0 0 0 rgba(79, 199, 239, 0.55); }
  70% { box-shadow: 0 0 0 14px rgba(79, 199, 239, 0); }
  100% { box-shadow: 0 0 0 0 rgba(79, 199, 239, 0); }
}

/* ---------- Pages locales : hero simplifié ---------- */
.local-hero {
  background: linear-gradient(160deg, var(--navy) 0%, #142A42 100%);
  color: var(--white);
  padding: calc(var(--header-height) + 48px) 0 48px;
  text-align: center;
}

.local-hero .eyebrow {
  color: var(--accent);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8rem;
  margin-bottom: 12px;
  display: block;
}

.local-hero h1 {
  color: var(--white);
  font-size: 1.9rem;
  margin-bottom: 14px;
  overflow-wrap: break-word;
}

.local-hero p {
  color: #C3D0E0;
  max-width: 600px;
  margin: 0 auto 24px;
}

.breadcrumb {
  font-size: 0.85rem;
  color: #8DA0B8;
  margin-bottom: 16px;
}

.breadcrumb a {
  color: var(--accent);
}

.commune-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 24px 0;
}

.commune-list li {
  background: var(--gray-light);
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 0.9rem;
  color: var(--text-main);
}

.cta-block {
  text-align: center;
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius);
  padding: 40px 24px;
}

.cta-block h2 {
  color: var(--white);
  margin-bottom: 12px;
}

.cta-block p {
  color: #C3D0E0;
  margin-bottom: 24px;
}

.footer-simple {
  background: #08131E;
  color: #8DA0B8;
  text-align: center;
  padding: 32px 20px;
  font-size: 0.9rem;
}

.footer-simple a {
  color: var(--accent);
  font-weight: 600;
}

/* ---------- Responsive ---------- */
@media (min-width: 600px) {
  .hero-stats {
    grid-template-columns: repeat(3, 1fr);
  }

  .offer-grid,
  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .offer-banner .container {
    flex-direction: row;
    justify-content: center;
  }

  .hero-actions {
    flex-direction: row;
    max-width: none;
    justify-content: center;
  }
}

@media (min-width: 720px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .zone-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1.3fr 0.8fr 0.8fr 1.1fr;
  }
}

@media (min-width: 860px) {
  body {
    padding-bottom: 0;
  }

  .floating-call {
    display: none;
  }

  .hamburger {
    display: none;
  }

  .main-nav {
    position: static;
    transform: none;
    flex-direction: row;
    background: transparent;
    padding: 0;
    gap: 28px;
    overflow: visible;
  }

  .main-nav a {
    border-bottom: none;
    padding: 8px 0;
    font-size: 0.95rem;
  }

  .header-call {
    padding: 10px 18px;
  }

  .hero h1 {
    font-size: 2.6rem;
  }

  .hero .subtitle {
    font-size: 1.15rem;
  }

  .local-hero h1 {
    font-size: 2.3rem;
  }

  .offer-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .why-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .contact-grid {
    grid-template-columns: 1.1fr 0.9fr;
  }

  .showcase-grid {
    grid-template-columns: 1fr 1fr;
  }

  .gallery-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  h1 { font-size: 2.6rem; }
  h2 { font-size: 2.1rem; }
}

@media (min-width: 1024px) {
  .section {
    padding: 88px 0;
  }
}

/* ==========================================================================
   Signature — la fracture d'impact
   ========================================================================== */

.fracture-divider {
  background: var(--navy);
  line-height: 0;
  padding-bottom: 20px;
}

.fracture-divider svg {
  display: block;
  width: 100%;
  height: 34px;
}

.fracture-divider path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: 0.9;
  stroke-dasharray: 2600;
  stroke-dashoffset: 2600;
}

.fracture-divider.is-visible path {
  animation: fractureDraw 1.7s ease-out 0.35s forwards;
}

.fracture-divider path.is-branch {
  stroke-width: 1;
  opacity: 0.5;
}

@keyframes fractureDraw {
  to { stroke-dashoffset: 0; }
}

.icon-fracture,
.icon-wiper {
  color: var(--blue);
  line-height: 0;
}

.icon-fracture svg,
.icon-wiper svg {
  width: 34px;
  height: 34px;
}

.icon-fracture path,
.icon-wiper path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-fracture path {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
}

.icon-fracture.is-visible path {
  animation: fractureDraw 0.9s ease-out forwards;
}

.icon-fracture circle,
.icon-wiper circle {
  fill: currentColor;
}

.icon-fracture circle {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
}

.icon-fracture.is-visible circle {
  animation: fracturePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.75s forwards;
}

@keyframes fracturePop {
  to { transform: scale(1); }
}

.icon-wiper path.is-trail {
  stroke-width: 1.6;
  stroke-dasharray: 3 4;
  opacity: 0.7;
}

.offer-block .icon-wiper {
  color: var(--accent);
}

/* Fine arête "verre" en tête des panneaux sombres : un fil de lumière qui
   accroche le bord, comme sur une tranche de vitrage. */
.offer-block,
.contact-card,
.cta-block {
  position: relative;
  overflow: hidden;
}

.offer-block::before,
.contact-card::before,
.cta-block::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(79, 199, 239, 0.7), transparent);
}

/* Repères chiffrés en police utilitaire (mono) */
.header-call,
.stat-value,
.zone-code,
.local-hero .eyebrow {
  font-family: var(--font-mono);
}

.zone-code {
  letter-spacing: 0.06em;
}

/* ---------- FAQ ---------- */
.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 4px 20px;
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 28px 16px 0;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--navy);
  position: relative;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 14px;
  font-family: var(--font-mono);
  font-size: 1.3rem;
  color: var(--blue);
  transition: transform var(--transition);
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item p {
  padding-bottom: 18px;
  font-size: 0.95rem;
}