/* =========================================================================
   Utech Informatique — feuille de style unique
   Organisation : 1. Tokens · 2. Base · 3. Composants · 4. Sections
                  5. Responsive · 6. Impression / accessibilité
   ========================================================================= */

/* ---------- 1. Tokens de design ---------- */
:root {
  /* Couleurs de marque */
  --green: #218141;
  --green-dark: #1a6b36;
  --green-darker: #14532b;
  --green-light: #eef7f1;
  --green-mid: #d7ebdf;

  /* Texte (contrastes vérifiés AA/AAA sur fond blanc) */
  --ink: #16201a;      /* titres */
  --body: #3f4a44;     /* texte courant */
  --muted: #5d6862;    /* texte secondaire */

  /* Surfaces */
  --bg: #ffffff;
  --bg-alt: #f4f7f5;
  --bg-dark: #1c2521;
  --border: #e2e8e4;

  /* Anciennes variables conservées pour compatibilité */
  --grey: var(--muted);
  --grey-dark: var(--ink);

  /* Rayons */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* Ombres */
  --sh-sm: 0 1px 2px rgba(16, 32, 24, .06), 0 2px 8px rgba(16, 32, 24, .05);
  --sh-md: 0 4px 12px rgba(16, 32, 24, .07), 0 12px 28px rgba(16, 32, 24, .07);
  --sh-lg: 0 18px 50px rgba(16, 32, 24, .14);

  /* Espacements */
  --sp-1: 6px;
  --sp-2: 12px;
  --sp-3: 18px;
  --sp-4: 26px;
  --sp-5: 38px;
  --sp-6: 56px;
  --section-y: clamp(48px, 7vw, 88px);

  /* Divers */
  --max: 1140px;
  --header-h: 118px; /* barre haute + header, pour les ancres */
  --ease: cubic-bezier(.4, .1, .2, 1);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--body);
  background: var(--bg);
  line-height: 1.6;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* garde-fou anti-débordement horizontal */
}

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

/* Sélection de texte aux couleurs de la marque */
::selection { background: var(--green-mid); color: var(--green-darker); }
.hero ::selection { background: rgba(255, 255, 255, .28); color: #fff; }

a { color: var(--green-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Focus clavier visible partout (jamais sur clic souris) */
/* Anneau de focus à deux tons : le liseré blanc le rend visible sur le
   bandeau vert foncé, l'anneau vert le rend visible sur fond clair. Un seul
   ton ne suffisait pas — sur le héros, le vert sur vert foncé disparaissait. */
:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff;
  border-radius: 4px;
}
.hero :focus-visible,
footer.site :focus-visible,
.top-bar :focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 5px rgba(33, 129, 65, .9);
}

h1, h2, h3, h4 {
  line-height: 1.18;
  margin: 0 0 .5em;
  color: var(--ink);
  letter-spacing: -.015em;
  text-wrap: balance;
}
h1 { font-size: clamp(1.72rem, 1.15rem + 2.2vw, 2.45rem); font-weight: 800; }
h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); font-weight: 800; }
h3 { font-size: 1.12rem; font-weight: 700; }
h4 { font-size: 1rem; font-weight: 700; }
p  { margin: 0 0 1em; text-wrap: pretty; }   /* évite les mots seuls en fin de paragraphe */
p:last-child { margin-bottom: 0; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; }
section { padding: var(--section-y) 0; }
.section-alt { background: var(--bg-alt); }

/* Les ancres ne passent plus sous le header collant */
[id] { scroll-margin-top: calc(var(--header-h) + 12px); }

.lead {
  font-size: clamp(1.02rem, .98rem + .3vw, 1.15rem);
  color: var(--muted);
  max-width: 68ch;
}

/* Sur-titre de section */
.eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--green-dark);
  margin-bottom: 10px;
}

/* Lien d'évitement (accessibilité clavier / lecteurs d'écran) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--green);
  color: #fff;
  padding: 12px 18px;
  z-index: 200;
  border-radius: 0 0 var(--r-sm) 0;
  font-weight: 700;
}
.skip-link:focus {
  left: 0;
  text-decoration: none;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- 3. Composants ---------- */

/* Boutons */
.btn-primary,
.btn-secondary,
.btn-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  border-radius: var(--r-sm);
  text-align: center;
  transition: background .18s var(--ease), border-color .18s var(--ease),
              color .18s var(--ease), transform .12s var(--ease), box-shadow .18s var(--ease);
  cursor: pointer;
}
.btn-primary {
  background: var(--green);
  color: #fff;
  padding: 14px 24px;
  font-size: 1rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
.btn-primary:hover { background: var(--green-dark); text-decoration: none; box-shadow: var(--sh-md); }
.btn-primary:active { transform: translateY(1px); box-shadow: none; }

.btn-secondary {
  background: #fff;
  color: var(--ink);
  border: 2px solid var(--border);
  padding: 12px 22px;
}
.btn-secondary:hover { border-color: var(--green); color: var(--green-dark); text-decoration: none; }
.btn-secondary:active { transform: translateY(1px); }

.btn-call {
  background: var(--green);
  color: #fff !important;
  padding: 11px 18px;
  white-space: nowrap;
  font-size: .95rem;
}
.btn-call:hover { background: var(--green-dark); text-decoration: none; }
.btn-call:active { transform: translateY(1px); }

/* Barre haute */
.top-bar {
  background: var(--bg-dark);
  color: #dfe5e2;
  font-size: .85rem;
}
.top-bar .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 7px;
  padding-bottom: 7px;
  flex-wrap: wrap;
  gap: 4px 16px;
}
.top-bar a { color: #fff; font-weight: 600; }
.top-right { display: flex; align-items: center; gap: 14px; }
.top-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;          /* zone cliquable confortable au doigt */
  height: 28px;
  margin: -4px 0;       /* sans épaissir la barre pour autant */
  border-radius: 50%;
  color: #b9c4bf;
  transition: color .16s var(--ease), transform .16s var(--ease), background .16s var(--ease);
}
.top-social:hover { background: rgba(255, 255, 255, .08); }
.top-social:hover { color: #86e0a5; transform: translateY(-1px); }
.top-bar .phone {
  color: #86e0a5;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 2px;   /* porte la hauteur cliquable au-delà de 24px */
}
.top-bar .phone:hover { color: #a8ecc0; }

/* Header */
header.site {
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  z-index: 60;
  transition: box-shadow .2s var(--ease);
}
header.site.is-scrolled { box-shadow: 0 2px 14px rgba(16, 32, 24, .09); }
header.site .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  padding-bottom: 12px;
  gap: 16px;
}
/* Le logo ne doit jamais être écrasé par le flex : il se déformerait. */
header.site .wrap > a:first-child { flex: 0 0 auto; display: flex; }
header.site img.logo { height: 42px; width: auto; max-width: none; }

nav.main { display: flex; align-items: center; gap: 4px; }
nav.main a {
  color: var(--ink);
  font-weight: 600;
  font-size: .95rem;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  transition: color .16s var(--ease), background .16s var(--ease);
}
nav.main a:hover { color: var(--green-dark); background: var(--green-light); text-decoration: none; }
nav.main a:active { background: var(--green-mid); }
nav.main a[aria-current="page"] { color: var(--green-dark); background: var(--green-light); }

/* Bouton menu mobile */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .22s var(--ease), opacity .22s var(--ease);
}
.nav-toggle span { position: relative; }
.nav-toggle span::before,
.nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* Héros — dégradé « mesh » + grille discrète */
.hero {
  position: relative;
  overflow: hidden;
  background: #0f2318;
  padding: clamp(52px, 6vw, 84px) 0;
}
@keyframes heroDrift {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.13) translate3d(-1.6%, -1.2%, 0); }
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: scale(1.06);
  animation: heroDrift 30s ease-in-out infinite alternate;
  background:
    radial-gradient(46% 60% at 12% 20%, rgba(88, 214, 141, .85) 0%, rgba(88, 214, 141, 0) 100%),
    radial-gradient(50% 65% at 85% 10%, rgba(33, 196, 145, .62) 0%, rgba(33, 196, 145, 0) 100%),
    radial-gradient(55% 70% at 90% 90%, rgba(15, 90, 60, .9) 0%, rgba(15, 90, 60, 0) 100%),
    radial-gradient(60% 70% at 15% 95%, rgba(20, 60, 45, .9) 0%, rgba(20, 60, 45, 0) 100%),
    linear-gradient(160deg, #123522 0%, #0c1f15 100%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .3;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 30%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 80% 80% at 50% 30%, #000 30%, transparent 75%);
}
/* Motif « circuit imprimé » : dessin original, purement décoratif.
   Il s'efface vers la gauche pour ne jamais gêner la lecture du titre. */
.hero-circuit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: #9df5c1;
  opacity: .26;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to right, transparent 18%, #000 62%, #000 90%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 18%, #000 62%, #000 90%, transparent 100%);
}

/* Impulsions lumineuses parcourant les pistes du circuit.
   Un seul trait court à la fois par piste, avec des départs décalés :
   ça vit, sans jamais attirer l'œil plus que le titre. */
.circuit-pulses .pulse {
  stroke: #eaffff;
  stroke-width: 3.6;
  stroke-dasharray: 15 185;   /* sur une longueur de référence de 100 */
  stroke-dashoffset: 200;
  opacity: 1;
  filter: drop-shadow(0 0 4px rgba(190, 255, 225, 1))
          drop-shadow(0 0 12px rgba(110, 245, 180, .85))
          drop-shadow(0 0 26px rgba(70, 220, 150, .5));
  animation: circuitTrace 9s linear infinite;
}
@keyframes circuitTrace { to { stroke-dashoffset: 0; } }
.circuit-pulses .p1 { animation-duration: 9s;  animation-delay: 0s; }
.circuit-pulses .p2 { animation-duration: 11s; animation-delay: 1.6s; }
.circuit-pulses .p3 { animation-duration: 10s; animation-delay: 3.2s; }
.circuit-pulses .p4 { animation-duration: 12s; animation-delay: 4.4s; }
.circuit-pulses .p5 { animation-duration: 10.5s; animation-delay: 6s; }
.circuit-pulses .p6 { animation-duration: 13s; animation-delay: 7.5s; }

.hero .wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.25fr .8fr;
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
}
.hero h1 { color: #fff; }
.hero .lead { color: #d9ecdf; }
.hero .badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, .13);
  color: #eafff2;
  border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-weight: 700;
  font-size: .82rem;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  margin-bottom: 16px;
}
.hero .cta-row { margin-top: var(--sp-4); display: flex; gap: 14px; flex-wrap: wrap; }
.hero .btn-secondary {
  background: rgba(255, 255, 255, .95);
  border-color: transparent;
}
.hero .btn-secondary:hover { background: #fff; border-color: transparent; }

.hero-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, auto));
  gap: 18px 40px;
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(255, 255, 255, .16);
  max-width: 560px;
}
.hero-stats strong[data-count-to] { font-variant-numeric: tabular-nums; }
.hero-stats strong {
  display: block;
  font-size: clamp(1.4rem, 1.2rem + .6vw, 1.7rem);
  color: #8fefb8;
  font-weight: 800;
  line-height: 1.1;
}
.hero-stats span { font-size: .85rem; color: #fff; font-weight: 600; opacity: .95; }

/* Carte « pourquoi nous » — effet verre dépoli assumé */
.hero-visual {
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: var(--r-lg);
  padding: clamp(22px, 3vw, 30px);
  box-shadow: var(--sh-lg);
}
.hero-visual h2, .hero-visual h3 { font-size: 1.1rem; margin-bottom: .7em; }
.hero-visual ul { margin: 0; padding-left: 0; list-style: none; }
.hero-visual li {
  position: relative;
  padding: 11px 0 11px 28px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: .94rem;
  color: var(--ink);
}
.hero-visual li:last-child { border-bottom: none; padding-bottom: 0; }
.hero-visual li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--green-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23218141' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* Cartes de services */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: var(--sp-5);
}
.service-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 26px 24px;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.service-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
  border-color: var(--green-mid);
}
.service-card:hover .service-icon { transform: scale(1.08) rotate(-3deg); }
.service-icon {
  transition: transform .2s var(--ease);
  width: 46px;
  height: 46px;
  border-radius: var(--r-sm);
  background: var(--green-light);
  color: var(--green-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.service-card h3 { color: var(--ink); margin-bottom: .4em; }
.service-card p { margin: 0; color: var(--muted); font-size: .94rem; }

/* Prestations complémentaires (mention sobre sous les services) */
.services-extra {
  margin-top: var(--sp-4);
  font-size: .9rem;
  color: var(--muted);
  border-left: 3px solid var(--green-mid);
  padding-left: 16px;
  max-width: 72ch;
}

/* Étapes « comment ça se passe » */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: var(--sp-5);
  list-style: none;
  padding: 0;
  counter-reset: step;
}
.steps li {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 24px 22px 22px;
}
.steps li::before {
  counter-increment: step;
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-weight: 800;
  font-size: .95rem;
  margin-bottom: 14px;
}
.steps h3 { font-size: 1.02rem; margin-bottom: .35em; }
.steps p { margin: 0; font-size: .93rem; color: var(--muted); }

/* Secteurs clients */
.sectors {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
}
.sectors h3 { font-size: 1.15rem; }
.sectors p { color: var(--muted); max-width: 68ch; font-size: .96rem; }
.sector-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: var(--sp-3) 0 0;
}
.sector-list li {
  background: var(--green-light);
  border: 1px solid var(--green-mid);
  color: var(--green-darker);
  border-radius: var(--r-pill);
  padding: 7px 16px;
  font-size: .88rem;
  font-weight: 600;
}

/* Zones desservies */
.zones-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px 20px;
  margin-top: var(--sp-4);
  list-style: none;
  padding: 0;
}
.zones-list li { border-bottom: 1px dotted var(--border); }
.zones-list a {
  display: block;
  padding: 9px 4px;
  font-weight: 600;
  font-size: .95rem;
  color: var(--ink);
  border-radius: 4px;
  transition: color .16s var(--ease), padding-left .16s var(--ease);
}
.zones-list a:hover { color: var(--green-dark); padding-left: 8px; text-decoration: none; }

/* Avis clients — carrousel */
.reviews-carousel {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: var(--sp-4);
}
.reviews-track-wrap { overflow: hidden; flex: 1; transition: height .3s var(--ease); }
.reviews-track {
  display: flex;
  gap: 20px;
  transition: transform .45s var(--ease);
}
.review-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 20px;
  flex: 0 0 calc((100% - 40px) / 3);
  display: flex;
  flex-direction: column;
  box-shadow: var(--sh-sm);
}
.review-card .stars { color: #f0a500; font-size: 1rem; letter-spacing: 1px; margin-bottom: 8px; }
.review-card blockquote { margin: 0 0 14px; flex: 1; }
.review-card blockquote p { font-size: .92rem; color: var(--body); margin: 0; }
.review-meta { margin: 0; font-size: .82rem; color: var(--muted); }
.review-name { display: block; font-weight: 700; color: var(--ink); font-size: .88rem; }
.review-src {
  display: inline-block;
  margin-top: 4px;
  font-size: .76rem;
  color: var(--muted);
}

/* Liens dans le corps du texte : soulignés, pour ne pas dépendre
   uniquement de la couleur (critère WCAG 1.4.1). */
.city-block p a,
.city-block li a,
.prose a,
.info-box a,
.reviews-note a,
.contact-note a,
.faq .faq-body a,
.map-consent a,
.breadcrumb a,
.aside-card dd a {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.city-block .other-cities a { text-decoration: none; }
.city-block .other-cities a:hover { text-decoration: underline; }
.carousel-arrow {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--green-dark);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .2s var(--ease), background .2s var(--ease),
              color .2s var(--ease), border-color .2s var(--ease);
}
.carousel-arrow:hover { background: var(--green); color: #fff; border-color: var(--green); }
.carousel-arrow[disabled] { opacity: .32; cursor: default; pointer-events: none; }
.reviews-note { margin-top: var(--sp-2); font-size: .86rem; color: var(--muted); }

/* Bandeau de note Google */
.google-rating {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: var(--sp-4);
  padding: 12px 20px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-sm);
  color: var(--ink);
  font-size: .95rem;
}
.google-rating .stars { color: #f0a500; letter-spacing: 1px; }
.google-rating strong { font-size: 1.05rem; }
a.google-rating { text-decoration: none; transition: border-color .16s var(--ease), box-shadow .16s var(--ease); }
a.google-rating:hover { border-color: var(--green-mid); box-shadow: var(--sh-md); text-decoration: none; }
.google-rating-cta { color: var(--green-dark); font-weight: 700; font-size: .88rem; }

/* FAQ */
.faq { margin-top: var(--sp-4); max-width: 820px; }
.faq details {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: #fff;
  margin-bottom: 10px;
  transition: border-color .16s var(--ease);
}
.faq details[open] { border-color: var(--green-mid); }
.faq summary {
  cursor: pointer;
  padding: 16px 46px 16px 18px;
  font-weight: 700;
  color: var(--ink);
  position: relative;
  list-style: none;
  font-size: .98rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.faq summary:hover { color: var(--green-dark); }
.faq .faq-body { padding: 0 18px 18px; color: var(--muted); font-size: .95rem; }

/* Contact */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(26px, 4vw, 44px);
  margin-top: var(--sp-4);
}
.contact-info { list-style: none; padding: 0; margin: 0 0 var(--sp-4); }
.contact-info li { margin-bottom: 16px; font-size: .97rem; }
.contact-info strong { display: block; color: var(--ink); margin-bottom: 2px; }
.contact-info a { font-weight: 600; }
.contact-note { font-size: .85rem; color: var(--muted); }

form.contact-form {
  display: grid;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: clamp(20px, 3vw, 28px);
  box-shadow: var(--sh-sm);
}
form.contact-form .field { display: grid; gap: 6px; }
form.contact-form label { font-size: .87rem; font-weight: 700; color: var(--ink); }
form.contact-form .opt { font-weight: 400; color: var(--muted); }
form.contact-form input,
form.contact-form textarea {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: .95rem;
  color: var(--ink);
  background: #fff;
  width: 100%;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
form.contact-form input:focus,
form.contact-form textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(33, 129, 65, .18);
}
form.contact-form textarea { resize: vertical; min-height: 110px; }
.check-line {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: .95rem !important;
  font-weight: 600 !important;
  padding: 4px 0;
}
.check-line input {
  width: 22px !important;
  height: 22px;
  flex: 0 0 auto;
  accent-color: var(--green);
  cursor: pointer;
}
/* Question anti-robot : le champ n'attend qu'un nombre, inutile qu'il barre
   toute la largeur du formulaire. */
form.contact-form input.field-court { max-width: 140px; }
.map-note { margin-top: 12px; }
form.contact-form button {
  background: var(--green);
  color: #fff;
  border: none;
  padding: 14px 20px;
  border-radius: var(--r-sm);
  font-weight: 700;
  cursor: pointer;
  font-size: 1rem;
  transition: background .18s var(--ease), transform .12s var(--ease);
}
form.contact-form button:hover { background: var(--green-dark); }
form.contact-form button:active { transform: translateY(1px); }
.form-error {
  color: #a3231b;
  font-size: .87rem;
  margin: 0;
  font-weight: 600;
}
.form-status {
  font-size: .9rem;
  color: var(--green-dark);
  background: var(--green-light);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  margin: 0;
  font-weight: 600;
}

/* Bouton révélant l'adresse e-mail (protection anti-spam) */
.btn-reveal {
  display: inline-block;
  background: var(--green-light);
  color: var(--green-darker);
  border: 1px solid var(--green-mid);
  border-radius: var(--r-sm);
  padding: 7px 14px;
  font: inherit;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .16s var(--ease), border-color .16s var(--ease);
}
.btn-reveal:hover { background: var(--green-mid); border-color: var(--green); }
.email-revealed { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.contact-info .contact-note { display: block; margin-top: 6px; }

/* Étiquette de provenance des avis */
.src-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--bg-alt);
  font-weight: 700;
  font-size: .72rem;
  color: var(--ink);
  letter-spacing: .01em;
}
.src-badge.src-google { border-color: #dcdcdc; background: #fff; }

/* Carte : chargée seulement au clic (RGPD + performance) */
.map-embed {
  position: relative;
  margin-top: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-alt);
}
/* Pas de texte de repli derrière l'iframe : vérifié au navigateur, une carte
   bloquée (bloqueur de publicité, réseau filtrant) est recouverte par la page
   d'erreur opaque de Chrome, qui masquerait n'importe quel repli placé là.
   Le fond gris évite le rectangle blanc pendant le chargement ; l'adresse et
   l'itinéraire restent lisibles hors de la carte, juste au-dessus et en
   dessous, ce qui rend son échec sans conséquence. */
.map-embed iframe { position: relative; display: block; width: 100%; height: 340px; border: 0; }

/* Variantes d'espacement (remplacent d'anciens styles en ligne) */
.info-box-wide { max-width: 780px; }
.prose-spaced { margin-top: var(--sp-5); }

/* Pages villes */
.city-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(28px, 4vw, 52px);
  align-items: start;
}
.aside-card {
  position: sticky;
  top: calc(var(--header-h) + 16px);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 24px 22px;
  box-shadow: var(--sh-sm);
}
.aside-card h2 { font-size: 1.08rem; margin-bottom: .5em; }
.aside-card p { font-size: .92rem; color: var(--muted); }
.aside-card .btn-primary,
.aside-card .btn-secondary {
  width: 100%;
  margin-top: 10px;
  white-space: nowrap;
  font-size: .93rem;
  padding-left: 12px;
  padding-right: 12px;
}
.aside-card dl { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--border); font-size: .88rem; }
.aside-card dt { font-weight: 700; color: var(--ink); margin-top: 10px; }
.aside-card dt:first-child { margin-top: 0; }
.aside-card dd { margin: 2px 0 0; color: var(--muted); }

.breadcrumb { font-size: .85rem; color: var(--muted); margin-bottom: 12px; }
.breadcrumb a { color: var(--green-dark); }
.city-hero {
  background: var(--bg-alt);
  padding: clamp(34px, 5vw, 54px) 0;
  border-bottom: 1px solid var(--border);
}
.city-hero .cta-row { margin-top: var(--sp-4); display: flex; gap: 14px; flex-wrap: wrap; }
.city-block { max-width: 780px; }
.city-block h2 { margin-top: 1.5em; }
.city-block h2:first-child { margin-top: 0; }
.city-services { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 8px; }
.city-services li { position: relative; padding-left: 26px; font-size: .96rem; }
.city-services li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--green-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23218141' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 10px no-repeat;
}
.info-box {
  background: var(--green-light);
  border-left: 4px solid var(--green);
  padding: 18px 22px;
  border-radius: var(--r-sm);
  margin: var(--sp-4) 0;
  color: var(--body);
}
.info-box strong { color: var(--ink); }
.other-cities { margin-top: var(--sp-4); font-size: .95rem; }
.other-cities a { margin-right: 14px; font-weight: 600; white-space: nowrap; }

/* Page assistance */
.assist-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  margin-top: var(--sp-2);
}
.assist-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  box-shadow: var(--sh-sm);
  transition: box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.assist-card:hover { box-shadow: var(--sh-md); border-color: var(--green-mid); }
.assist-card p { color: var(--muted); font-size: .95rem; }
.assist-icon {
  width: 54px;
  height: 54px;
  border-radius: var(--r-md);
  background: var(--green-light);
  color: var(--green-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.assist-card h2 { font-size: 1.3rem; margin-bottom: .2em; }
.assist-sub { color: var(--green-dark); font-weight: 700; font-size: .92rem; margin-bottom: 1em; }
.assist-btn { margin-top: auto; align-self: flex-start; }
.assist-note { font-size: .84rem; color: var(--muted); margin-top: 12px; }

.about-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 240px;
  background: var(--bg-alt);
  border: 2px dashed var(--border);
  border-radius: var(--r-md);
  padding: 24px;
  margin-bottom: var(--sp-5);
}

/* Contenu éditorial (mentions légales, confidentialité, 404) */
.prose { max-width: 780px; }
.prose h2 { margin-top: 1.6em; font-size: 1.25rem; }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: 6px; }
.prose dl { margin: 0 0 1.2em; }
.prose dt { font-weight: 700; color: var(--ink); margin-top: 12px; }
.prose dd { margin: 0 0 4px; }
.placeholder-value {
  background: #fff6da;
  border: 1px dashed #d8b23c;
  border-radius: 4px;
  padding: 1px 7px;
  font-size: .9em;
  color: #6b5210;
}

/* Pied de page */
footer.site {
  background: var(--bg-dark);
  color: #c8d0cc;
  padding: var(--sp-6) 0 24px;
}
footer.site a { color: #fff; }
footer.site a:hover { color: #8fefb8; }
footer.site .foot-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.1fr;
  gap: 32px;
}
footer.site h3 { color: #fff; font-size: .95rem; margin-bottom: 14px; }
footer.site p { font-size: .9rem; }
footer.site ul { list-style: none; padding: 0; margin: 0; }
footer.site li { margin-bottom: 4px; font-size: .9rem; }
footer.site li a {
  display: inline-block;
  padding: 5px 0;   /* cible d'au moins 24px de haut */
}
footer.site .bottom {
  border-top: 1px solid rgba(255, 255, 255, .14);
  margin-top: var(--sp-5);
  padding-top: 18px;
  font-size: .82rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 20px;
}
.social-row { display: flex; gap: 10px; margin-top: 4px; }
.social-row a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.social-row a:hover { background: var(--green); border-color: var(--green); }

/* Apparition douce au défilement.
   ⚠️ Tout ce bloc est conditionné à « scripting: enabled » : sans JavaScript,
   ou sur un navigateur ancien qui ne connaît pas cette média-requête, le
   contenu reste simplement visible au lieu de disparaître. */
@media (scripting: enabled) {
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}

/* Filet de sécurité : tant que le script n'a pas signalé qu'il tourne
   (classe « js-ready » posée dès sa première ligne), le contenu se réaffiche
   tout seul au bout de 2,5 s. Si assets/js/site.js ne se charge pas — réseau
   coupé, fichier absent, blocage — la page reste lisible au lieu d'être vide. */
@keyframes revealSafety { to { opacity: 1; transform: none; } }
html:not(.js-ready) .reveal,
html:not(.js-ready) .reveal .services-grid > *,
html:not(.js-ready) .reveal .steps > *,
html:not(.js-ready) .reveal .faq details {
  animation: revealSafety 0s linear 2.5s forwards;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Les cartes d'une même grille apparaissent l'une après l'autre,
   avec un décalage court : l'œil suit, sans que ce soit spectaculaire. */
.reveal .services-grid > *,
.reveal .steps > *,
.reveal .faq details {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.reveal.is-visible .services-grid > *,
.reveal.is-visible .steps > *,
.reveal.is-visible .faq details { opacity: 1; transform: none; }
.reveal.is-visible .services-grid > *:nth-child(2),
.reveal.is-visible .steps > *:nth-child(2),
.reveal.is-visible .faq details:nth-child(2) { transition-delay: .06s; }
.reveal.is-visible .services-grid > *:nth-child(3),
.reveal.is-visible .steps > *:nth-child(3),
.reveal.is-visible .faq details:nth-child(3) { transition-delay: .12s; }
.reveal.is-visible .services-grid > *:nth-child(4),
.reveal.is-visible .faq details:nth-child(4) { transition-delay: .18s; }
.reveal.is-visible .services-grid > *:nth-child(5),
.reveal.is-visible .faq details:nth-child(5) { transition-delay: .24s; }
.reveal.is-visible .services-grid > *:nth-child(6),
.reveal.is-visible .faq details:nth-child(6) { transition-delay: .3s; }
}   /* fin de @media (scripting: enabled) */

/* ---------- 5. Responsive ---------- */
/* Au-delà de 1600px, la mise en page s'élargit un peu : sur un grand écran,
   1140px laissaient plus de 700px de vide de chaque côté. Les blocs de texte
   gardent leur propre largeur maximale, la lecture reste confortable. */
@media (min-width: 1600px) {
  :root { --max: 1320px; }
}

@media (max-width: 1024px) {
  nav.main a { padding: 8px 9px; font-size: .92rem; }
}

@media (max-width: 900px) {
  :root { --header-h: 108px; }

  /* Menu mobile */
  .nav-toggle { display: inline-flex; }
  nav.main {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--sh-md);
    padding: 8px 20px 16px;
  }
  nav.main.is-open { display: flex; }
  nav.main a {
    padding: 13px 10px;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    font-size: 1rem;
  }
  nav.main a:last-child { border-bottom: none; }
  header.site .wrap { position: relative; flex-wrap: nowrap; }

  .hero .wrap { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .zones-list { grid-template-columns: repeat(2, 1fr); }
  .review-card { flex-basis: calc((100% - 20px) / 2); }
  .contact-grid { grid-template-columns: 1fr; }
  .assist-grid { grid-template-columns: 1fr; }
  .city-layout { grid-template-columns: minmax(0, 1fr); }
  .aside-card { position: static; }
  footer.site .foot-grid { grid-template-columns: 1fr 1fr; gap: 26px; }
}

@media (max-width: 640px) {
  .top-bar .hours-extra { display: none; }
  .services-grid { grid-template-columns: 1fr; }
  .zones-list { grid-template-columns: 1fr; }
  .review-card { flex-basis: 100%; }
  /* Une seule carte visible à la fois : l'alignement des hauteurs n'a plus
     d'utilité et creusait un grand vide sous les avis courts. Chaque carte
     reprend sa hauteur réelle ; le conteneur, lui, garde celle de la plus
     haute, donc le carrousel ne sautille pas d'un avis à l'autre. */
  .reviews-track { align-items: flex-start; }
  .btn-call { padding: 10px 14px; font-size: .9rem; }
  header.site img.logo { height: 36px; }
  footer.site .foot-grid { grid-template-columns: 1fr; }
  .hero .cta-row .btn-primary,
  .hero .cta-row .btn-secondary,
  .city-hero .cta-row .btn-primary,
  .city-hero .cta-row .btn-secondary { flex: 1 1 100%; }
  .other-cities a { display: inline-block; margin-bottom: 6px; }
}

@media (max-width: 380px) {
  .wrap { padding: 0 14px; }
  .aside-card .btn-primary,
  .aside-card .btn-secondary { white-space: normal; }
  .btn-call .btn-call-text { display: none; }
  .btn-call { padding: 10px 12px; }
}

/* ---------- 6. Accessibilité & impression ---------- */

/* Respecte le réglage système « réduire les animations » */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal, .reveal .services-grid > *, .reveal .steps > *,
  .reveal .faq details { opacity: 1; transform: none; }
  .hero::before { animation: none; }
  .circuit-pulses { display: none; }
}

@media print {
  .top-bar, nav.main, .nav-toggle, .btn-call, .carousel-arrow,
  .map-embed, form.contact-form, .hero::after { display: none !important; }
  header.site { position: static; box-shadow: none; }
  .hero { background: #fff !important; padding: 20px 0; }
  .hero::before { display: none; }
  .hero h1, .hero .lead, .hero-stats span { color: #000 !important; }
  .hero-stats strong { color: #000 !important; }
  footer.site { background: #fff; color: #000; }
  footer.site a, footer.site h3 { color: #000; }
  .reveal, .reveal * { opacity: 1 !important; transform: none !important; }

  /* À l'écran, le carrousel ne montre que trois avis à la fois ; à l'impression
     il n'y a pas de flèches, donc on déroule la liste entière. */
  .reviews-track-wrap { overflow: visible !important; height: auto !important; }
  .reviews-track { display: block !important; transform: none !important; }
  .review-card { margin-bottom: 10px; }

  /* Aucune carte ni question ne doit être coupée entre deux pages */
  .review-card, .service-card, .steps li, .faq details, .assist-card {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  body { font-size: 12pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; word-break: break-all; }
}