/* ==========================================================================
   DOCEUL MAÇONNERIE — Design tokens
   Direction : matière (pierre, mortier, chantier), pas de gradient générique.
   ========================================================================== */
:root {
  /* Couleurs */
  --gold: #EBBC2B;        /* or de marque, conservé du logo existant */
  --gold-dark: #A8820F;   /* pour texte sur fond clair (contraste AA) */
  --charcoal: #1B1815;    /* noir chaud, ardoise/suie plutôt que noir pur */
  --charcoal-soft: #2A2622;
  --stone: #E7E0CE;       /* tuffeau / pierre de Loire */
  --stone-light: #F4F0E4;
  --mortar: #8C7A5E;      /* gris-brun, couleur du joint de mortier */
  --white: #FFFFFF;
  --ink: #262220;

  /* Typo — police de l'ancien site conservée pour la lisibilité (Lato) */
  --font-display: "Lato", "Segoe UI", sans-serif;
  --font-body: "Lato", "Segoe UI", sans-serif;
  --font-label: "Lato", "Segoe UI", sans-serif;

  /* Échelle */
  --radius: 2px; /* volontairement anguleux, matière pierre/béton */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.55;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3 { font-family: var(--font-display); margin: 0 0 .4em; line-height: 1.1; }
h1 { font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 900; }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 900; }
.label {
  font-family: var(--font-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .75rem;
  color: var(--gold-dark);
}

.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* --- Icônes SVG sobres (remplacent les emojis) --- */
.icon { flex-shrink: 0; vertical-align: -3px; }

/* --- Barre de contact toujours visible (priorité métier : le téléphone) --- */
.topbar {
  background: var(--charcoal);
  color: var(--stone-light);
  font-family: var(--font-label);
  font-size: .8rem;
  letter-spacing: .04em;
}
.topbar .container {
  display: flex; justify-content: space-between; align-items: center;
  height: 38px;
}
.topbar a.phone { color: var(--gold); font-weight: 700; text-decoration: none; }

/* --- Nav --- */
header.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--white);
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.nav .container { display: flex; align-items: center; justify-content: space-between; height: 84px; }
.nav .logo img { height: 56px; width: auto; }
.nav ul { list-style: none; display: flex; gap: 32px; margin: 0; padding: 0; font-weight: 600; }
.nav ul a { text-decoration: none; position: relative; padding: 4px 0; }
.nav ul a:hover { color: var(--gold-dark); }
.nav .cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--charcoal); color: var(--white);
  padding: 10px 20px; text-decoration: none; font-weight: 700;
  border-radius: var(--radius);
}
.nav .cta:hover { background: var(--gold); color: var(--charcoal); }

/* --- Bouton hamburger (mobile uniquement) --- */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  background-color: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  color: var(--ink);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  box-shadow: none;
}
.nav-toggle:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 2px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* --- Hero (pages intérieures : une photo + texte, ex. fiches villes) --- */
.hero {
  position: relative;
  min-height: 78vh;
  display: flex; align-items: flex-end;
  background-size: cover; background-position: center;
  background-color: var(--charcoal);
  color: var(--white);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  /* Voile allégé : on garde le texte lisible sans masquer les chantiers */
  background: linear-gradient(180deg, rgba(27,24,21,.05) 0%, rgba(27,24,21,.35) 55%, rgba(27,24,21,.72) 100%);
}
.hero .container { position: relative; z-index: 2; padding-bottom: 56px; }
.hero .label { color: var(--gold); text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.hero h1 { text-shadow: 0 2px 16px rgba(0,0,0,.55); }
.hero p.lede { max-width: 46ch; font-size: 1.15rem; color: var(--stone-light); text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.hero .actions { display: flex; gap: 16px; margin-top: 24px; flex-wrap: wrap; }

/* --- Galerie hero (page d'accueil) : l'image plein cadre est séparée du
   texte, on navigue à la flèche pour voir plusieurs chantiers, le texte
   de présentation vient ensuite dans .hero-content. --- */
.hero-gallery {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--charcoal-soft);
}
.hero-gallery-track { position: relative; width: 100%; }
.hero-gallery-slide {
  position: absolute; inset: 0; z-index: 0;
  margin: 0;
  opacity: 0;
  transition: opacity .7s ease;
}
.hero-gallery-slide.is-active { opacity: 1; z-index: 1; }
.hero-gallery-slide img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Repli pour anciens navigateurs Android ne supportant pas aspect-ratio */
@supports not (aspect-ratio: 16 / 10) {
  .hero-gallery-track { height: 0; padding-bottom: 62.5%; }
}
@supports (aspect-ratio: 16 / 10) {
  .hero-gallery-track { aspect-ratio: 16 / 10; max-height: 46vh; }
}
@media (min-width: 721px) {
  @supports not (aspect-ratio: 16 / 7) {
    .hero-gallery-track { padding-bottom: 43.75%; }
  }
  @supports (aspect-ratio: 16 / 7) {
    .hero-gallery-track { aspect-ratio: 16 / 7; max-height: 60vh; }
  }
  /* On préfère montrer le chantier en entier (quitte à laisser un fond
     de part et d'autre) plutôt que de recadrer l'image sur ce format large */
  .hero-gallery-slide img { object-fit: contain; }

  /* Idem pour les pages intérieures (Ravalement, Avis, fiches villes...) :
     sur grand écran, la hauteur en vh forçait un zoom énorme sur des photos
     bien plus petites que l'écran. On montre la photo entière, non recadrée. */
  .hero { background-size: contain; background-repeat: no-repeat; }
}
.hero-gallery-slide figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  background: linear-gradient(to top, rgba(27,24,21,.75), rgba(27,24,21,0));
  color: var(--white); font-family: var(--font-label); font-weight: 700;
  font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  padding: 30px 16px 12px;
}
.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.92); border: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--charcoal); cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,.3);
}
.hero-arrow:hover { background: var(--gold); }
.hero-arrow.prev { left: 14px; }
.hero-arrow.next { right: 14px; }
.hero-dots {
  position: absolute; left: 0; right: 0; bottom: 14px; z-index: 3;
  display: flex; justify-content: center; gap: 8px;
}
.hero-dots button {
  width: 8px; height: 8px; padding: 0; border-radius: 50%;
  border: none; background: rgba(255,255,255,.5); cursor: pointer;
}
.hero-dots button.active { background: var(--gold); width: 22px; border-radius: 999px; transition: width .2s ease; }

/* --- Bloc de texte du hero, sous la galerie : présentation + appel --- */
.hero-content { background: var(--charcoal); color: var(--white); padding: 44px 0 48px; }
.hero-content .label { color: var(--gold); }
.hero-content .lede { max-width: 46ch; font-size: 1.15rem; color: var(--stone-light); }
.hero-content .actions { display: flex; gap: 16px; margin-top: 24px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; text-decoration: none; font-weight: 700;
  border-radius: var(--radius); border: 2px solid transparent;
  font-size: .95rem;
}
.btn-gold { background: var(--gold); color: var(--charcoal); }
.btn-gold:hover { background: #d9ab1f; }
.btn-outline { border-color: var(--stone-light); color: var(--white); }
.btn-outline:hover { background: rgba(255,255,255,.1); }

/* --- Bandeau de confiance --- */
.trust {
  background: var(--stone);
  border-top: 4px solid var(--gold);
}
.trust .container {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; flex-wrap: wrap; gap: 20px;
}
.trust .item { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.trust img.badge { height: 48px; width: auto; }

/* --- Bandeau artisan (visage + présentation, pour rassurer le client) --- */
.artisan-strip {
  background: var(--stone-light);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.artisan-strip .container {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 24px;
}
.artisan-photo {
  width: 64px; height: 64px; flex-shrink: 0;
  border-radius: 50%; object-fit: cover; object-position: 50% 15%;
  border: 2px solid var(--gold);
}
.artisan-text {
  margin: 0; font-size: .92rem; color: var(--ink);
}
.artisan-text strong { font-family: var(--font-display); font-size: 1.02rem; }
.artisan-text span { display: block; color: var(--mortar); font-size: .88rem; margin-top: 2px; }

/* --- Section générique --- */
.section { padding: 88px 0; }
.section.dark { background: var(--charcoal); color: var(--stone-light); }
.section.dark h2 { color: var(--white); }
.section.stone { background: var(--stone-light); }

/* --- Comparateur avant / après (élément signature) --- */
.compare {
  position: relative;
  max-width: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  cursor: ew-resize;
  user-select: none;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.4);
}
/* Repli pour anciens navigateurs Android ne supportant pas aspect-ratio */
@supports not (aspect-ratio: 4 / 3) {
  .compare { height: 0; padding-bottom: 75%; }
}
@supports (aspect-ratio: 4 / 3) {
  .compare { aspect-ratio: 4 / 3; }
}
.compare img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.compare .after { z-index: 1; }
.compare .before-wrap {
  position: absolute; inset: 0;
  width: 50%; overflow: hidden; z-index: 2;
  border-right: 3px solid var(--gold);
}
.compare .before-wrap img { width: var(--compare-w, 100vw); max-width: none; height: 100%; }
.compare .handle {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--gold); z-index: 3;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
  pointer-events: none;
}
.compare .handle::before { content: "‹›"; font-weight: 900; color: var(--charcoal); font-size: 1.1rem; letter-spacing: -2px; }
.compare .tag {
  position: absolute; top: 16px; z-index: 4;
  font-family: var(--font-label); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; background: rgba(27,24,21,.75); color: var(--white);
  padding: 6px 12px; border-radius: 2px;
}
.compare .tag.before-tag { left: 16px; }
.compare .tag.after-tag { right: 16px; }

/* --- Galerie de réalisations (chantiers sans vraie photo "avant") --- */
.realisation-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.realisation-gallery figure {
  position: relative; margin: 0; overflow: hidden;
  border-radius: var(--radius);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.4);
}
.realisation-gallery img {
  display: block; width: 100%; height: 100%;
  aspect-ratio: 4 / 3; object-fit: cover;
}
.realisation-gallery figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(27,24,21,.8), rgba(27,24,21,0));
  color: var(--white); font-family: var(--font-label); font-size: .7rem;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 26px 14px 10px;
}
/* --- Services --- */
.services-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 2px; background: rgba(0,0,0,.08); margin-top: 40px;
}
.service-card {
  background: var(--white); padding: 32px 26px;
}
.service-card h3 { color: var(--ink); }
.service-card .num { font-family: var(--font-label); color: var(--gold-dark); font-size: .8rem; }

/* --- Zone d'intervention (maillage SEO) --- */
.zones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.zones a {
  border: 1px solid rgba(255,255,255,.25);
  padding: 10px 18px; text-decoration: none; border-radius: 999px;
  font-size: .9rem; color: var(--stone-light);
}
.zones a:hover, .zones a.current { background: var(--gold); color: var(--charcoal); border-color: var(--gold); }

/* --- Avis --- */
.testimonial {
  background: var(--white); border-left: 4px solid var(--gold);
  padding: 28px 32px; font-style: italic; font-size: 1.05rem;
  box-shadow: 0 10px 30px -18px rgba(0,0,0,.25);
}
.testimonial .author { font-style: normal; font-weight: 700; margin-top: 14px; font-size: .9rem; color: var(--mortar); }

/* --- Barre d'appel fixe mobile (masquée sur desktop, voir media query) --- */
.mobile-call-bar {
  display: none;
  align-items: center; justify-content: center; gap: 10px;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--gold); color: var(--charcoal);
  font-weight: 700; text-decoration: none;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 20px rgba(0,0,0,.18);
}

/* --- Footer --- */
footer.site-footer {
  background: var(--charcoal); color: rgba(255,255,255,.65);
  padding: 56px 0 28px; font-size: .9rem;
}
footer .container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
footer a { color: var(--stone-light); text-decoration: none; }
footer .legal { width: 100%; border-top: 1px solid rgba(255,255,255,.1); margin-top: 32px; padding-top: 20px; font-size: .8rem; }

@media (max-width: 720px) {
  .nav-toggle { display: inline-flex; }
  .nav .container { position: relative; }
  .nav ul {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--white);
    border-bottom: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 12px 24px rgba(0,0,0,.12);
  }
  .nav ul.nav-open { display: flex; }
  .nav ul li { width: 100%; }
  .nav ul a { display: block; padding: 14px 24px; }
  .nav .cta span { display: none; } /* icône seule dans la nav mobile, texte complet dans le hero + barre fixe */

  .hero { min-height: 66vh; }
  .hero .actions { flex-direction: column; align-items: stretch; }
  .hero .actions .btn { justify-content: center; width: 100%; }

  .hero-content .actions { flex-direction: column; align-items: stretch; }
  .hero-content .actions .btn { justify-content: center; width: 100%; }
  .hero-arrow { width: 40px; height: 40px; }

  /* Les photos sources sont quasi carrées : un format 16/10 les coupait
     de moitié sur mobile. On passe à un format plus proche du carré pour
     montrer davantage le chantier et donner plus de présence à l'image. */
  @supports (aspect-ratio: 4 / 5) {
    .hero-gallery-track { aspect-ratio: 4 / 5; max-height: 72vh; }
  }
  @supports not (aspect-ratio: 4 / 5) {
    .hero-gallery-track { height: 0; padding-bottom: 125%; max-height: 72vh; }
  }

  .hero-gallery-slide figcaption {
    font-size: .8rem;
    padding: 80px 16px 16px;
    background: linear-gradient(to top, rgba(27,24,21,.88) 0%, rgba(27,24,21,.5) 55%, rgba(27,24,21,0) 100%);
  }
  .hero-dots { bottom: 16px; gap: 8px; }
  .hero-dots button { width: 9px; height: 9px; box-shadow: 0 1px 3px rgba(0,0,0,.35); }

  .trust .container { flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px 24px; }

  .artisan-strip .container { flex-direction: column; text-align: center; padding: 24px; }

  /* Comparateur : on garde le geste horizontal pour la souris/le doigt sans
     que la page ne défile verticalement pendant le glissement (voir compare.js) */
  .compare { touch-action: none; }

  .services-grid { gap: 1px; }

  footer .container { flex-direction: column; }

  /* espace pour ne pas passer sous la barre d'appel fixe */
  .mobile-call-bar { display: flex; }
  footer.site-footer { padding-bottom: calc(28px + 56px + env(safe-area-inset-bottom)); }
}

@media (min-width: 721px) {
  .mobile-call-bar { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   Extensions ajoutées pour couvrir toutes les pages du site
   (hub villes, page d'accueil, contact, mentions légales)
   ========================================================================== */

/* --- Nav : lien actif --- */
.nav ul a.current { color: var(--gold-dark); }

/* --- Hero réduit (pages sans photo de chantier en fond) --- */
.hero-small { min-height: 42vh; }

/* --- Hero sans photo (ex. page contact) : même traitement que le bloc de
   texte du hero d'accueil (charcoal uni), pas de gradient générique --- */
.hero-plain {
  background: var(--charcoal);
  border-top: 4px solid var(--gold);
  align-items: center;
}
.hero-plain::before { content: none; }

/* --- Grille de villes (hubs maçonnerie / ravalement + réalisations home) --- */
.city-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px; margin-top: 40px;
}
.city-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--white); border: 1px solid rgba(0,0,0,.08);
  overflow: hidden; border-radius: var(--radius);
  transition: box-shadow .2s ease, transform .2s ease;
}
.city-card:hover { box-shadow: 0 20px 40px -24px rgba(0,0,0,.35); transform: translateY(-2px); }
.city-card img { width: 100%; height: 170px; object-fit: cover; }
.city-card-body { padding: 16px 18px; }
.city-card-body h3 { font-family: var(--font-display); font-size: 1.05rem; margin: 0 0 4px; color: var(--ink); }
.city-card-body span { font-family: var(--font-label); font-size: .78rem; color: var(--mortar); }

/* --- Bloc "qui je suis" (page d'accueil) --- */
.about-grid {
  display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: start;
  margin-top: 36px;
}
.about-photo { width: 100%; border-radius: var(--radius); object-fit: cover; aspect-ratio: 3/4; border: 2px solid var(--gold); }
.about-text p { color: var(--ink); margin: 0 0 16px; }
.about-text p:last-child { margin-bottom: 0; }

/* --- Page Avis clients (grille de 32 avis Google) --- */

/* Bandeau de note globale, juste sous le hero */
.rating-bar { background: var(--stone-light); border-bottom: 1px solid rgba(0,0,0,.06); }
.rating-bar .container {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 20px 44px; padding: 32px 24px; text-align: center;
}
.rating-bar .rb-score { display: flex; align-items: baseline; gap: 6px; }
.rating-bar .rb-score strong {
  font-family: var(--font-display); font-size: 2.6rem; font-weight: 700; color: var(--ink); line-height: 1;
}
.rating-bar .rb-score span { font-family: var(--font-label); font-size: .85rem; color: var(--mortar); }
.rating-bar .rb-stars { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rating-bar .rb-stars .stars { color: var(--gold-dark); }
.rating-bar .rb-stars .stars .star { width: 20px; height: 20px; }
.rating-bar .rb-stars small { font-family: var(--font-label); font-size: .74rem; color: var(--mortar); letter-spacing: .04em; }
.rating-bar .rb-divider { width: 1px; height: 44px; background: rgba(0,0,0,.12); }
.rating-bar .rb-google {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  color: var(--ink); font-weight: 700; padding: 10px 18px;
  border: 1px solid rgba(0,0,0,.14); border-radius: var(--radius);
  background: var(--white); transition: box-shadow .2s ease, transform .2s ease;
}
.rating-bar .rb-google:hover { box-shadow: 0 10px 24px -14px rgba(0,0,0,.35); transform: translateY(-1px); }
.rating-bar .rb-google svg { flex-shrink: 0; }

/* Avis mis en avant (citation premium) */
.avis-featured { background: var(--charcoal); color: var(--white); position: relative; overflow: hidden; }
.avis-featured .container { position: relative; max-width: 860px; text-align: center; }
.avis-featured .quote-mark {
  font-family: var(--font-display); font-size: 7rem; line-height: 1; color: var(--gold);
  opacity: .5; margin: 0 0 -1.2rem;
}
.avis-featured blockquote {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.35; color: var(--white);
}
.avis-featured .stars { justify-content: center; color: var(--gold); margin: 22px 0 18px; }
.avis-featured cite {
  display: block; font-style: normal; font-family: var(--font-label);
  font-size: .8rem; letter-spacing: .06em; color: var(--stone-light); opacity: .75;
}

.avis-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px; margin-top: 44px;
}
.avis-card {
  background: var(--white); border: 1px solid rgba(0,0,0,.07);
  border-radius: var(--radius); padding: 28px 26px 22px;
  box-shadow: 0 14px 34px -26px rgba(27,24,21,.4);
  display: flex; flex-direction: column; gap: 16px;
  position: relative;
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.avis-card::before {
  content: "";
  position: absolute; top: 0; left: 26px; width: 34px; height: 3px;
  background: var(--gold);
}
.avis-card:hover {
  box-shadow: 0 26px 50px -26px rgba(27,24,21,.45);
  transform: translateY(-3px);
  border-color: rgba(0,0,0,.12);
}
.avis-card.hidden-avis { display: none; }
.avis-head { display: flex; align-items: center; gap: 14px; }
.avis-avatar {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; position: relative;
  background: linear-gradient(155deg, var(--gold) 0%, var(--gold-dark) 100%); color: var(--charcoal);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
}
.avis-avatar::after {
  content: ""; position: absolute; right: -3px; bottom: -3px;
  width: 17px; height: 17px; border-radius: 50%; background: var(--white);
  box-shadow: 0 0 0 2px var(--white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48' height='48'%3E%3Cpath fill='%23FFC107' d='M43.6 20.5H42V20H24v8h11.3C33.7 32.7 29.3 36 24 36c-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.9 1.2 8 3.1l5.7-5.7C34.6 6.5 29.6 4 24 4 12.9 4 4 12.9 4 24s8.9 20 20 20 20-8.9 20-20c0-1.3-.1-2.7-.4-3.5z'/%3E%3Cpath fill='%23FF3D00' d='m6.3 14.7 6.6 4.8C14.6 15.6 18.9 13 24 13c3.1 0 5.9 1.2 8 3.1l5.7-5.7C34.6 6.5 29.6 4 24 4c-7.5 0-14 4.2-17.3 10.4z'/%3E%3Cpath fill='%234CAF50' d='M24 44c5.5 0 10.4-2.1 14.1-5.6l-6.5-5.5C29.6 34.7 26.9 36 24 36c-5.3 0-9.7-3.3-11.3-8l-6.6 5.1C9.9 39.7 16.4 44 24 44z'/%3E%3Cpath fill='%231976D2' d='M43.6 20.5H42V20H24v8h11.3c-1 2.8-2.9 5.1-5.3 6.5l6.5 5.5C39.7 37.4 44 31.6 44 24c0-1.3-.1-2.7-.4-3.5z'/%3E%3C/svg%3E");
  background-size: 12px 12px; background-repeat: no-repeat; background-position: center;
}
.avis-name { font-weight: 700; margin: 0 0 4px; font-size: .95rem; color: var(--ink); }
.stars { display: flex; gap: 2px; color: var(--gold-dark); }
.stars .star { display: block; }
.avis-body { color: var(--ink); font-size: .92rem; flex-grow: 1; }
.avis-body p { margin: 0 0 10px; }
.avis-body p:last-child { margin-bottom: 0; }
.avis-body .avis-nocomment { color: var(--mortar); font-style: italic; }
.avis-meta {
  display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline;
  font-family: var(--font-label); font-size: .72rem; color: var(--mortar);
  border-top: 1px solid rgba(0,0,0,.06); padding-top: 14px;
}
.avis-visited { margin: 0; }
.avis-more-wrap { text-align: center; margin-top: 40px; }
.btn-outline-dark {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; text-decoration: none; font-weight: 700;
  border-radius: var(--radius); border: 2px solid var(--charcoal);
  color: var(--charcoal); background: transparent; font-size: .95rem;
  cursor: pointer; font-family: var(--font-body);
}
.btn-outline-dark:hover { background: var(--charcoal); color: var(--white); }

/* Bloc de conversion final, dédié à la page avis */
.avis-cta-close {
  background: linear-gradient(155deg, var(--charcoal) 0%, var(--charcoal-soft) 100%);
  color: var(--white); text-align: center;
}
.avis-cta-close .label { color: var(--gold); }
.avis-cta-close h2 { color: var(--white); max-width: 26ch; margin-left: auto; margin-right: auto; }
.avis-cta-close p.lede {
  max-width: 52ch; margin: 0 auto 30px; color: var(--stone-light); font-size: 1.05rem;
}
.avis-cta-close .actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.avis-cta-close .reassurance {
  display: flex; justify-content: center; gap: 28px; flex-wrap: wrap;
  margin-top: 36px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.12);
}
.avis-cta-close .reassurance .item {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-label); font-size: .78rem; letter-spacing: .03em; color: var(--stone-light);
}
.avis-cta-close .reassurance .item svg { color: var(--gold); flex-shrink: 0; }

@media (max-width: 720px) {
  .rating-bar .rb-divider { display: none; }
  .avis-featured .quote-mark { font-size: 4.5rem; }
}

/* --- Grille de témoignages (accueil) --- */
.testimonial-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px; margin-top: 32px;
}
.testimonial-grid .testimonial { font-size: .95rem; }

/* --- Carrousel d'avis (accueil) : vrai carrousel swipeable (scroll-snap) --- */
.avis-summary {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 10px;
}
.avis-summary .stars .star { width: 18px; height: 18px; }
.avis-summary strong { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); }
.avis-summary span { font-size: .9rem; color: var(--mortar); }

.testimonial-carousel-wrap {
  position: relative;
  margin-top: 28px;
}
.testimonial-carousel {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-left: 4px;
  -webkit-overflow-scrolling: touch;
  padding: 4px 4px 20px;
  margin: -4px -4px -20px;
  scrollbar-width: thin;
  /* Autorise le swipe horizontal du carrousel ET le scroll vertical de la
     page même quand le doigt touche d'abord le carrousel. "pan-y" seul
     bloquait le swipe horizontal : c'était le bug. */
  touch-action: pan-x pan-y;
}
.testimonial-carousel .avis-card {
  flex: 0 0 300px;
  scroll-snap-align: start;
}
.testimonial-carousel .avis-body { font-size: .92rem; font-style: normal; }
.carousel-arrow {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.1);
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 10px 24px -14px rgba(0,0,0,.35);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}
.carousel-arrow:hover { background: var(--gold); border-color: var(--gold); }
.carousel-arrow.prev { left: -22px; }
.carousel-arrow.next { right: -22px; }
.testimonial-carousel-wrap:hover .carousel-arrow,
.carousel-arrow:focus-visible { display: flex; }

/* petits points de pagination + indice de balayage, utiles surtout au tactile */
.carousel-dots {
  display: flex; justify-content: center; gap: 8px; margin-top: 18px;
}
.carousel-dots button {
  width: 8px; height: 8px; padding: 0; border-radius: 50%;
  border: none; background: rgba(0,0,0,.18); cursor: pointer;
}
.carousel-dots button.active { background: var(--gold-dark); width: 22px; border-radius: 999px; transition: width .2s ease; }
.carousel-hint {
  display: none;
  text-align: center; font-size: .8rem; color: var(--mortar);
  margin-top: 4px; letter-spacing: .02em;
}
.testimonial-cta { margin-top: 30px; text-align: center; }

@media (min-width: 900px) {
  .carousel-arrow { display: flex; }
  .carousel-dots { display: none; }
}

@media (max-width: 720px) {
  .testimonial-carousel .avis-card { flex-basis: 82vw; }
  .carousel-arrow { display: none !important; }
  .carousel-hint { display: block; }
}
/* --- Zones sur fond clair (contact / accueil hors section sombre) --- */
.zones-light a { border-color: rgba(0,0,0,.15); color: var(--ink); }
.zones-light a:hover { background: var(--gold); border-color: var(--gold); color: var(--charcoal); }

/* --- Page contact --- */
.contact-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px; margin-bottom: 32px;
}
.contact-card {
  background: var(--stone-light); padding: 28px; border-radius: var(--radius);
  border-top: 3px solid var(--gold);
}
.contact-card h2 { font-size: 1.3rem; }
.contact-card a { text-decoration: none; }
.contact-card a:hover { color: var(--gold-dark); }

/* --- Mentions légales : article long, typographie lisible --- */
.legal-content { max-width: 820px; }
.legal-content h1 { margin-bottom: 32px; }
.legal-content h2 { font-size: 1.25rem; margin-top: 44px; padding-top: 8px; border-top: 1px solid rgba(0,0,0,.08); }
.legal-content h2:first-of-type { border-top: none; margin-top: 8px; }
.legal-content p, .legal-content li { color: var(--ink); font-size: .95rem; }
.legal-content ul { padding-left: 20px; }

@media (max-width: 720px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-photo { max-width: 280px; margin: 0 auto; border: 3px solid var(--gold); }
  .city-card img { height: 220px; }
}