@font-face {
  font-family: "Jost";
  src: url("../assets/fonts/jost-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --rouge: #E0201F;
  --rouge-fonce: #BE1A19;
  --blanc: #FFFFFF;
  --or: #D9B878;
  --voile: #2E2219;
  --voile-rgb: 46, 34, 25;
  --creme: #F8F5F0;
  --bande: #EEE9E2;
  --encre: #1F1A17;
  --texte: #39322D;
  --or-titre: #A27A35;  /* doré lisible sur crème pour les grands titres */
  --or-fonce: #8C6A2C;  /* doré lisible sur crème pour les petits textes */
}

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

/* Animation d'ouverture (une fois par visite) : le logo doré apparaît sur fond brun, puis s'efface */
html.intro-en-cours::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--voile);
  animation: intro-secours 0s 3s forwards; /* sécurité : disparaît toute seule si le script ne tourne pas */
}

@keyframes intro-secours { to { visibility: hidden; } }

.intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--voile);
  transition: opacity .6s ease, visibility .6s ease;
}

.intro__contenu { display: grid; justify-items: center; gap: 18px; }

.intro__logo {
  width: min(220px, 50vw);
  height: auto;
  opacity: 0;
  transform: scale(.94);
  animation: intro-logo .9s ease forwards;
}

.intro__trait {
  width: 0;
  height: 1.5px;
  background: var(--or);
  animation: intro-trait .7s .45s ease forwards;
}

.intro.sortie { opacity: 0; visibility: hidden; }

@keyframes intro-logo { to { opacity: 1; transform: scale(1); } }
@keyframes intro-trait { to { width: min(160px, 36vw); } }

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

body {
  margin: 0;
  padding-bottom: calc(58px + env(safe-area-inset-bottom));
  background: var(--voile);
  color: var(--blanc);
  font-family: "Jost", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
}

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

a { color: inherit; }

a:focus-visible {
  outline: 2px solid var(--blanc);
  outline-offset: 3px;
}

/* En-tête posé sur la photo */
.entete {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  padding: 0 16px;
}

.entete__logo img { width: auto; height: 58px; }

.entete__devis {
  display: none;
  align-items: center;
  min-height: 44px;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--rouge);
  color: var(--blanc);
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: .02em;
  transition: background-color .15s ease;
}

.entete__devis:hover { background: var(--rouge-fonce); }

/* Menu : caché sur téléphone, ouvert par le bouton à trois traits */
.menu {
  position: absolute;
  top: 80px;
  right: 0;
  left: 0;
  display: none;
  flex-direction: column;
  padding: 8px 16px 16px;
  background: var(--voile);
}

.menu.ouvert { display: flex; }

.menu a {
  padding: 12px 0;
  font-size: 1.0625rem;
  text-decoration: none;
}

.menu a[aria-current] { color: var(--or); }

.entete__burger {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--blanc);
  cursor: pointer;
}

.entete__burger span,
.entete__burger span::before,
.entete__burger span::after {
  position: absolute;
  left: 10px;
  width: 24px;
  height: 2px;
  background: currentColor;
}

.entete__burger span { top: 21px; }
.entete__burger span::before,
.entete__burger span::after { content: ""; left: 0; }
.entete__burger span::before { top: -7px; }
.entete__burger span::after { top: 7px; }

/* Haut de page : photo sur tout l'écran, texte clair sur voile sombre */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: calc(100svh - 58px);
  overflow: hidden;
  background: var(--voile);
}

.hero__photo {
  position: absolute;
  inset: 0;
}

.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}

/* Le voile, sous le texte uniquement */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--voile-rgb), .5) 0, rgba(var(--voile-rgb), 0) 120px);
}

.hero__texte {
  position: relative;
  z-index: 1;
  padding: 72px 16px 24px;
  background: linear-gradient(0deg, rgba(var(--voile-rgb), .94) 0, rgba(var(--voile-rgb), .9) calc(100% - 96px), rgba(var(--voile-rgb), 0) 100%);
}

.titre-or { color: var(--or); }

/* Le fin trait doré sous le titre */
h1::after {
  content: "";
  display: block;
  width: 80px;
  height: 1px;
  margin-top: 14px;
  background: var(--or);
}

h1 {
  margin: 0;
  font-size: 2.2rem;
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.hero__phrase {
  max-width: 34em;
  margin: 12px 0 0;
  color: rgba(255, 255, 255, .84);
  font-size: 1rem;
  line-height: 1.45;
}

.hero__boutons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: 16px;
}

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--blanc);
  text-align: center;
  color: var(--rouge);
  font-weight: 600;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}

.bouton:hover { background: var(--rouge); color: var(--blanc); }

.lien {
  padding: 4px 0;
  border-bottom: 1px solid var(--blanc);
  font-weight: 500;
  text-decoration: none;
  transition: opacity .15s ease;
}

.lien:hover { opacity: .75; }

.hero__confiance {
  margin: 14px 0 0;
  color: rgba(255, 255, 255, .72);
  font-size: .8125rem;
}

.hero__confiance span { display: block; }

.hero__confiance .hero__point {
  display: none;
  margin: 0 .35em;
  color: var(--blanc);
  font-weight: 700;
}

/* Barre fixe mobile */
.barre-mobile {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--blanc);
}

.barre-mobile a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 58px;
  font-weight: 600;
  text-decoration: none;
}

.barre-mobile__appel { color: var(--rouge); }
.barre-mobile__devis { background: var(--rouge); color: var(--blanc); }

/* Ordinateur : texte à gauche, le voile part de la gauche */
@media (min-width: 900px) {
  body { padding-bottom: 0; }
  .barre-mobile { display: none; }

  .entete {
    height: clamp(104px, 9vw, 150px);
    padding: 10px clamp(32px, 5vw, 84px) 0;
  }

  .entete__logo img { height: clamp(68px, 6vw, 100px); }

  .entete__devis {
    display: inline-flex;
    flex: none;
    min-height: clamp(48px, 3.3vw, 56px);
    padding: 0 28px;
    font-size: clamp(1rem, 1.08vw, 1.125rem);
  }

  .entete__burger { display: none; }

  .menu {
    position: static;
    display: flex;
    flex-direction: row;
    gap: clamp(16px, 2.6vw, 44px);
    margin: 0 auto;
    padding: 0;
    background: none;
  }

  .menu a {
    padding: 6px 0;
    border-bottom: 2px solid transparent;
    font-size: clamp(.9375rem, 1.08vw, 1.125rem);
    font-weight: 500;
  }

  .menu a:hover,
  .menu a[aria-current] {
    border-color: var(--or);
    color: var(--blanc);
  }

  .hero {
    justify-content: center;
    min-height: max(640px, 100svh);
  }

  /* Photo nette sur tout l'écran, le côté droit reste toujours visible */
  .hero__photo img { object-position: 70% 50%; }

  .hero::after { background: none; }

  .hero__texte {
    width: min(48%, 720px);
    background: none;
    margin-left: clamp(32px, 7.8vw, 130px);
    padding: clamp(104px, 9vw, 150px) 0 40px;
  }

  h1 {
    font-size: clamp(2.75rem, 4.25vw, 4.5rem);
    line-height: 1.03;
  }

  h1::after {
    width: clamp(90px, 7.6vw, 127px);
    margin-top: clamp(20px, 1.8vw, 30px);
  }

  .hero__phrase {
    max-width: 33em;
    margin-top: clamp(16px, 1.4vw, 24px);
    color: var(--blanc);
    font-size: clamp(1.0625rem, 1.25vw, 1.3125rem);
    line-height: 1.42;
  }

  .hero__boutons {
    gap: 32px;
    margin-top: clamp(24px, 2vw, 34px);
  }

  .bouton {
    min-height: clamp(54px, 3.95vw, 66px);
    padding: 0 clamp(32px, 2.4vw, 40px);
    font-size: clamp(1.0625rem, 1.3vw, 1.375rem);
  }

  .lien { font-size: clamp(1.0625rem, 1.3vw, 1.375rem); }

  .hero__confiance {
    margin-top: clamp(22px, 1.9vw, 32px);
    color: var(--blanc);
    font-size: clamp(.9375rem, 1.12vw, 1.1875rem);
  }

  .hero__confiance span,
  .hero__confiance .hero__point { display: inline; }
}

/* Textes manquants, à compléter avant la mise en ligne */
.todo {
  color: var(--or-fonce);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* En-tête clair, collé en haut une fois la photo dépassée */
.entete.fixe {
  position: fixed;
  height: 72px;
  background: rgba(248, 245, 240, .97);
  box-shadow: 0 1px 0 rgba(31, 26, 23, .08);
  color: var(--encre);
}

.entete.fixe .entete__logo img { height: 52px; }
.entete.fixe .entete__burger { color: var(--encre); }
.entete.fixe .menu a[aria-current] { color: var(--or-fonce); }

/* Bandeau de confiance */
.bandeau-confiance {
  margin: 0;
  padding: 8px 16px;
  background: var(--bande);
  color: var(--encre);
  font-size: .875rem;
  text-align: center;
}

.bandeau-confiance span { display: block; }
.bandeau-confiance .bandeau-confiance__point { display: none; }

.bandeau-confiance__point {
  margin: 0 .8em;
  color: var(--or-titre);
}

/* Nos prestations */
.prestations,
.bloc {
  padding: 40px 16px 48px;
  background: var(--creme);
  color: var(--texte);
}

.prestations__intro,
.cartes,
.prestations__tout,
.bloc__intro,
.chantiers,
.avis {
  max-width: 1520px;
  margin-right: auto;
  margin-left: auto;
}

.surtitre {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0 0 8px;
  color: var(--or-fonce);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.surtitre::after {
  content: "";
  flex: 0 1 120px;
  min-width: 32px;
  height: 2px;
  background: var(--or-titre);
}

.prestations h2,
.bloc h2 {
  margin: 0;
  color: var(--encre);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.titre-or-fonce {
  display: block;
  color: var(--or-titre);
}

.prestations__texte {
  max-width: 78em;
  margin: 20px 0 0;
  color: var(--encre);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.prestations__texte a {
  color: var(--or-fonce);
  text-underline-offset: 3px;
}

.cartes {
  display: grid;
  gap: 24px;
  margin-top: 32px;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}

.carte {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  background: var(--blanc);
  box-shadow: 0 1px 2px rgba(31, 26, 23, .06), 0 10px 28px rgba(31, 26, 23, .07);
}

.carte img {
  width: 100%;
  aspect-ratio: 940 / 494;
  object-fit: cover;
}

.carte__corps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px 22px;
}

.carte__numero {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  color: var(--or-titre);
  font-size: 1.625rem;
  font-weight: 500;
  line-height: 1;
}

.carte__numero::after {
  content: "";
  width: 46px;
  height: 2px;
  background: var(--or-titre);
}

.carte h3 {
  margin: 0;
  padding-right: 48px;
  color: var(--encre);
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.25;
}

.carte h3 a { text-decoration: none; }

/* Toute la carte est cliquable */
.carte h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.carte__corps > p:not(.carte__numero) {
  max-width: 34em;
  margin: 0;
  color: var(--texte);
  font-size: 1rem;
  line-height: 1.45;
}

.etiquettes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.etiquettes li {
  padding: 5px 16px;
  border-radius: 999px;
  background: var(--bande);
  color: var(--encre);
  font-size: .9375rem;
}

.carte__fleche {
  position: absolute;
  top: 24px;
  right: 20px;
  width: 40px;
  height: 40px;
  overflow: visible;
  fill: none;
  stroke: var(--or-titre);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: fill .15s ease, stroke .15s ease;
}

.carte:hover { box-shadow: 0 1px 2px rgba(31, 26, 23, .08), 0 14px 34px rgba(31, 26, 23, .12); }
.carte:hover .carte__fleche circle { fill: var(--or-titre); }
.carte:hover .carte__fleche path { stroke: var(--blanc); }
.carte:focus-within { outline: 2px solid var(--or-fonce); outline-offset: 3px; }
.carte h3 a:focus-visible { outline: none; }

.prestations__tout {
  margin-top: 36px;
  margin-bottom: 0;
  text-align: center;
}

.prestations__tout a {
  display: inline-flex;
  gap: 14px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--or-titre);
  color: var(--encre);
  font-size: 1.25rem;
  font-weight: 500;
  text-decoration: none;
}

.prestations__tout span { color: var(--or-titre); }
.bloc a:focus-visible { outline-color: var(--or-fonce); }
.prestations__tout a:hover { color: var(--or-fonce); }
.prestations a:focus-visible { outline-color: var(--or-fonce); }

/* Défilement des avis : de droite à gauche, lent, en boucle ; arrêt au survol ou au toucher */
.defile {
  display: flex;
  max-width: 1600px;
  margin: 28px auto 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}

.defile .avis.defile__piste {
  display: flex;
  flex: none;
  gap: 24px;
  max-width: none;  /* sinon la bande est coupée et la copie chevauche les avis */
  margin: 0;
  padding: 8px 24px 16px 0;
  animation: defiler 60s linear infinite;
}

.defile:hover .defile__piste,
.defile:focus-within .defile__piste,
.defile.pause .defile__piste { animation-play-state: paused; }

.defile .avis__carte {
  display: flex;
  flex: 0 0 min(340px, 82vw);
  flex-direction: column;
}

.defile .avis__lien { margin-top: auto; padding-top: 14px; }

@keyframes defiler {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  .defile {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .defile .avis.defile__piste { animation: none; padding-left: 16px; }
  .defile__copie { display: none !important; }
}

/* Savoir-faire : photo de chantier à gauche, texte à droite */
.bloc--savoir-faire { background: var(--creme); color: var(--texte); border-top: 1px solid var(--bande); }

.savoir-faire {
  display: grid;
  gap: 28px;
  max-width: 1520px;
  margin: 0 auto;
}

.carrousel {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  aspect-ratio: 3 / 4;
  background: var(--bande);
  touch-action: pan-y;
}

.carrousel__piste {
  display: flex;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform .45s ease;
}

.carrousel__diapo { flex: 0 0 100%; height: 100%; }
.carrousel__diapo picture { display: block; height: 100%; }

.carrousel__diapo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carrousel__fleches {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: flex;
  gap: 8px;
}

.carrousel__fleche {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1.5px solid var(--or-titre);
  border-radius: 50%;
  background: rgba(255, 255, 255, .88);
  color: var(--or-titre);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

.carrousel__fleche svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.carrousel__fleche--prec svg { transform: rotate(180deg); }
.carrousel__fleche:hover { background: var(--or-titre); color: var(--blanc); }
.carrousel__fleche:focus-visible { outline: 2px solid var(--or-fonce); outline-offset: 2px; }

.savoir-faire__texte { min-width: 0; align-self: center; }

.savoir-faire__paragraphes {
  display: grid;
  gap: 18px;
  margin-top: 22px;
}

.savoir-faire__paragraphes p {
  max-width: 40em;
  margin: 0;
  padding-left: 22px;
  border-left: 2px solid var(--or-titre);
  color: var(--encre);
  font-size: 1.0625rem;
  line-height: 1.55;
}

.savoir-faire__lien { margin: 28px 0 0; }

.savoir-faire__lien a {
  display: inline-flex;
  gap: 14px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--or-titre);
  color: var(--encre);
  font-size: 1.25rem;
  font-weight: 500;
  text-decoration: none;
}

.savoir-faire__lien span { color: var(--or-titre); }
.savoir-faire__lien a:hover { color: var(--or-fonce); }

@media (min-width: 900px) {
  .savoir-faire {
    grid-template-columns: 2fr 3fr;
    gap: clamp(32px, 4vw, 64px);
    padding-left: clamp(0px, 1.5vw, 24px);
  }

  .bloc--savoir-faire { padding-top: 56px; padding-bottom: 64px; }
  .savoir-faire__paragraphes p { font-size: clamp(1.0625rem, 1.25vw, 1.3125rem); }
  .savoir-faire__lien a { font-size: clamp(1.25rem, 1.45vw, 1.5rem); }
}

@media (prefers-reduced-motion: reduce) {
  .carrousel__piste { transition: none; }
}

/* Zone d'intervention : texte à gauche, communes à droite, sans carte ni icône */
.bloc--zone { background: #F3EEE7; color: var(--texte); }

.zone {
  display: grid;
  gap: 28px;
  max-width: 1520px;
  margin: 0 auto;
}

.zone__intro { min-width: 0; }

.zone__groupes {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  align-self: center;
}

.zone__groupe {
  padding: 18px 22px;
  border-left: 2px solid var(--or-titre);
  border-radius: 0 12px 12px 0;
  background: var(--blanc);
}

.zone__groupe h3 {
  margin: 0;
  color: var(--encre);
  font-size: 1.1875rem;
  font-weight: 500;
}

.zone__groupe p {
  margin: 6px 0 0;
  color: var(--texte);
  font-size: 1rem;
  line-height: 1.5;
}

.zone__suite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 20px;
  max-width: 1520px;
  margin: 32px auto 0;
  text-align: center;
}

.zone__question {
  margin: 0;
  color: var(--encre);
  font-size: 1.125rem;
}

.zone__question a {
  color: var(--or-fonce);
  font-weight: 500;
  text-decoration-color: var(--or-titre);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  white-space: nowrap;
}

.zone__question a:hover { color: var(--encre); }

/* Un nom de ville n'est jamais coupé en fin de ligne */
.ville { white-space: nowrap; }

@media (min-width: 900px) {
  .zone {
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 80px);
    padding-left: clamp(0px, 1.5vw, 24px);
  }

  .bloc--zone { padding-top: 56px; padding-bottom: 48px; }
  .zone__groupes { grid-template-columns: 1fr 1fr; }
  .zone__question { font-size: clamp(1.125rem, 1.25vw, 1.25rem); }
}

/* Bandeau final : texte à gauche, formulaire de devis à droite */
.bandeau-devis {
  padding: 48px 16px;
  background: var(--voile);
  color: #F3EEE7;
}

.bandeau-devis__grille {
  display: grid;
  gap: 32px;
  max-width: 1520px;
  margin: 0 auto;
}

.bandeau-devis__texte { min-width: 0; align-self: center; }

.bandeau-devis h2 {
  margin: 0;
  color: #F3EEE7;
  font-size: 2.1rem;
  font-weight: 400;
  line-height: 1.12;
  text-wrap: balance;
}

.bandeau-devis h2 .titre-or { display: block; }

.bandeau-devis__texte > p {
  max-width: 34em;
  margin: 18px 0 0;
  color: rgba(243, 238, 231, .9);
  font-size: 1.0625rem;
  line-height: 1.55;
}

.bandeau-devis__boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.bouton-contour {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 22px;
  border: 1.5px solid var(--or);
  border-radius: 999px;
  color: #F3EEE7;
  font-weight: 500;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}

.bouton-contour svg { color: var(--or); }
.bouton-contour:hover { background: var(--or); color: var(--voile); }
.bouton-contour:hover svg { color: var(--voile); }

.devis-carte {
  min-width: 0;
  padding: 24px 20px;
  border-radius: 16px;
  background: var(--creme);
  color: var(--encre);
}

.devis-carte h3 {
  margin: 0 0 16px;
  color: var(--encre);
  font-size: 1.375rem;
  font-weight: 500;
}

.devis-formulaire {
  display: grid;
  gap: 14px;
}

.champ { display: grid; gap: 6px; min-width: 0; }

.champ label {
  color: var(--encre);
  font-size: .9375rem;
  font-weight: 500;
}

.champ label span { color: var(--texte); font-weight: 400; }

.champ input,
.champ select,
.champ textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid #D8CEC1;
  border-radius: 8px;
  background: var(--blanc);
  color: var(--encre);
  font: inherit;
  font-size: 1rem;
}

.champ textarea { min-height: 96px; resize: vertical; }

.champ input:focus,
.champ select:focus,
.champ textarea:focus { outline: 2px solid var(--or-fonce); outline-offset: 1px; border-color: var(--or-fonce); }

.champ [aria-invalid="true"] { border-color: var(--rouge); }

.devis-envoyer {
  min-height: 54px;
  margin-top: 4px;
  border: 0;
  border-radius: 999px;
  background: var(--rouge);
  color: var(--blanc);
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease;
}

.devis-envoyer:hover { background: var(--rouge-fonce); }
.devis-envoyer:focus-visible { outline: 2px solid var(--or-fonce); outline-offset: 3px; }

.devis-statut { margin: 0; color: var(--encre); font-size: .9375rem; }
.devis-statut:empty { display: none; }

.devis-mention {
  margin: 0;
  color: var(--texte);
  font-size: .8125rem;
  line-height: 1.45;
}

.devis-mention a { color: var(--or-fonce); }

/* Parcours de devis en 4 étapes : étiquettes à cliquer, coordonnées à la fin */
.devis-formulaire { display: block; }

.etapes__progression {
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--bande);
}

.etapes__barre {
  display: block;
  width: 25%;
  height: 100%;
  background: var(--or-titre);
  transition: width .3s ease;
}

.etapes__compteur {
  margin: 8px 0 14px;
  color: var(--texte);
  font-size: .875rem;
}

.etape {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.etape > legend,
.ligne-puces legend {
  padding: 0;
  color: var(--encre);
  font-size: 1.125rem;
  font-weight: 500;
}

.etape > legend { margin-bottom: 14px; }
.etape > legend span { color: var(--texte); font-size: .9375rem; font-weight: 400; }

.ligne-puces { margin: 0 0 14px; padding: 0; border: 0; }
.ligne-puces legend { margin-bottom: 8px; font-size: 1rem; }

.puces {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.puce { position: relative; cursor: pointer; }

.puce input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.puce span {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 8px 16px;
  border: 1.5px solid #D8CEC1;
  border-radius: 999px;
  background: var(--blanc);
  color: var(--encre);
  font-size: .9375rem;
  line-height: 1.25;
  transition: border-color .15s ease, background-color .15s ease;
}

.puce:hover span { border-color: var(--or-titre); }
.puce input:checked + span { border-color: var(--or-titre); background: #F1E6CF; font-weight: 500; }
.puce input:focus-visible + span { outline: 2px solid var(--or-fonce); outline-offset: 2px; }

.etape__champs { display: grid; gap: 14px; }

.etape .devis-envoyer { width: 100%; margin-top: 16px; }
.etape .devis-mention { margin-top: 10px; }

.devis-statut { margin: 12px 0 0; }

/* Champ piège anti-spam : invisible pour les visiteurs */
.piege {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  clip-path: inset(50%);
}

.devis-formulaire { position: relative; }

.devis-merci {
  padding: 24px 0 8px;
  color: var(--encre);
  font-size: 1.0625rem;
}

.devis-merci p { margin: 0; }
.devis-merci__titre { margin-bottom: 6px !important; color: var(--encre); font-size: 1.375rem; font-weight: 500; }

.etapes__navigation {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}

.etapes__retour,
.etapes__suivant {
  min-height: 44px;
  padding: 0 20px;
  border: 1.5px solid var(--or-titre);
  border-radius: 999px;
  background: transparent;
  color: var(--encre);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

.etapes__suivant { margin-left: auto; background: var(--or-titre); color: var(--blanc); border-color: var(--or-titre); }
.etapes__retour:hover { background: var(--bande); }
.etapes__suivant:hover { background: var(--or-fonce); border-color: var(--or-fonce); }
.etapes__retour:focus-visible,
.etapes__suivant:focus-visible { outline: 2px solid var(--or-fonce); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .etapes__barre { transition: none; }
}

@media (min-width: 900px) {
  .bandeau-devis { padding: 72px clamp(32px, 5vw, 80px); }

  .bandeau-devis__grille {
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 96px);
    padding-left: clamp(0px, 1.5vw, 24px);
  }

  .bandeau-devis h2 { font-size: clamp(2.5rem, 3.4vw, 3.5rem); }
  .bandeau-devis__texte > p { font-size: clamp(1.0625rem, 1.25vw, 1.25rem); }

  .devis-carte { padding: 32px; }
  .etape__champs { grid-template-columns: 1fr 1fr; }
  .etape__champs > .champ--large { grid-column: 1 / -1; }
}

/* Pied de page (le même sur toutes les pages) */
.pied {
  padding: 48px 16px 24px;
  background: #1E1611;
  color: #F3EEE7;
  font-size: .9375rem;
  line-height: 1.55;
}

.pied__colonnes {
  display: grid;
  gap: 32px;
  max-width: 1520px;
  margin: 0 auto;
}

.pied__colonne { min-width: 0; }
.pied__colonne p { margin: 0 0 10px; color: rgba(243, 238, 231, .86); }

.pied__logo img { width: auto; height: 72px; margin-bottom: 14px; }

.pied__titre {
  margin: 0 0 14px;
  color: var(--or);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.pied address { font-style: normal; }

.pied__liste,
.pied__sous-liste,
.pied__legal {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pied__liste > li { margin-bottom: 8px; color: rgba(243, 238, 231, .86); }
.pied__sous-liste { margin: 6px 0 0 14px; }
.pied__sous-liste li { margin-bottom: 4px; }

.pied a { color: #F3EEE7; text-decoration-color: rgba(217, 184, 120, .6); text-underline-offset: 3px; }
.pied a:hover { color: var(--or); }
.pied a:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
.pied .todo { color: var(--or); text-decoration-color: rgba(217, 184, 120, .5); font-size: .875rem; }

.pied__intervention { margin-top: 16px !important; }
.pied__zone-lien { color: var(--or) !important; font-weight: 500; }
.pied__zone-lien:hover { color: #F3EEE7 !important; }

.pied__bas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: center;
  justify-content: space-between;
  max-width: 1520px;
  margin: 36px auto 0;
  padding-top: 18px;
  border-top: 1px solid rgba(217, 184, 120, .45);
  color: rgba(243, 238, 231, .7);
  font-size: .8125rem;
}

.pied__bas p { margin: 0; }
.pied__legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }

@media (min-width: 760px) {
  .pied__colonnes { grid-template-columns: repeat(2, 1fr); }
  .pied__colonnes > :first-child { grid-column: 1 / -1; }
}

@media (min-width: 1100px) {
  .pied { padding: 64px clamp(32px, 5vw, 80px) 28px; }
  .pied__colonnes { grid-template-columns: 1.1fr 1.3fr 1fr; gap: clamp(32px, 4vw, 72px); }
  .pied__colonnes > :first-child { grid-column: auto; }
}

/* Questions fréquentes : accordéon, une question ouverte à la fois */
.bloc--faq { background: var(--creme); color: var(--texte); border-top: 1px solid var(--bande); }

.faq {
  display: grid;
  gap: 24px;
  max-width: 1520px;
  margin: 0 auto;
}

.faq__liste { min-width: 0; border-top: 1px solid #E2D9CC; }

.faq__item { border-bottom: 1px solid #E2D9CC; }

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 2px;
  cursor: pointer;
  list-style: none;
}

.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:focus-visible { outline: 2px solid var(--or-fonce); outline-offset: 2px; }

.faq__item h3 {
  margin: 0;
  color: var(--encre);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.35;
}

.faq__signe {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--or-titre);
  border-radius: 50%;
}

.faq__signe::before,
.faq__signe::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.5px;
  background: var(--or-titre);
  transform: translate(-50%, -50%);
  transition: transform .2s ease;
}

.faq__signe::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] .faq__signe::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__item summary:hover .faq__signe { background: #F1E6CF; }

.faq__item p {
  max-width: 46em;
  margin: 0;
  padding: 0 2px 20px;
  color: var(--encre);
  font-size: 1.0625rem;
  line-height: 1.6;
}

@media (min-width: 900px) {
  .faq {
    grid-template-columns: 1fr 2fr;
    gap: clamp(32px, 5vw, 80px);
    padding-left: clamp(0px, 1.5vw, 24px);
  }

  .bloc--faq { padding-top: 56px; padding-bottom: 64px; }
  .faq__item h3 { font-size: clamp(1.125rem, 1.35vw, 1.375rem); }
  .faq__item p { font-size: clamp(1.0625rem, 1.2vw, 1.1875rem); }
}

@media (prefers-reduced-motion: reduce) {
  .faq__signe::before, .faq__signe::after { transition: none; }
}

/* Pages intérieures : en-tête clair dès le haut */
.page-interne { background: var(--creme); color: var(--texte); }
.page-interne main { padding-top: 72px; }

.fil-ariane { margin-bottom: 18px; color: var(--texte); font-size: .8125rem; }
.fil-ariane a { color: var(--texte); text-underline-offset: 3px; }
.fil-ariane span[aria-hidden] { margin: 0 6px; color: var(--or-titre); }

.page-haut {
  display: grid;
  background: var(--creme);
}

.page-haut__texte { padding: 24px 16px 28px; }

.page-haut h1::after { display: none; }

.page-haut h1 {
  margin: 0;
  color: var(--encre);
  font-size: 2.1rem;
  font-weight: 500;
  line-height: 1.12;
}

.page-haut__intro {
  max-width: 36em;
  margin: 16px 0 0;
  color: var(--encre);
  font-size: 1.0625rem;
  line-height: 1.55;
}

.page-haut__ancres {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.page-haut__ancres a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border: 1.5px solid var(--or-titre);
  border-radius: 999px;
  color: var(--or-fonce);
  font-weight: 500;
  text-decoration: none;
}

.page-haut__ancres a:hover { background: var(--or-titre); color: var(--blanc); }
.page-haut__ancres a:focus-visible { outline: 2px solid var(--or-fonce); outline-offset: 2px; }

.page-haut__photo img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* Les 3 prestations, photo et texte en alternance */
.presta {
  display: grid;
  gap: 20px;
  padding: 28px 16px;
  border-top: 1px solid var(--bande);
  scroll-margin-top: 80px;
}

.presta__photo img { width: 100%; border-radius: 4px; aspect-ratio: 940 / 494; object-fit: cover; }

.presta__texte {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
  min-width: 0;
}

.presta__texte .presta__numero {
  margin: 0;
  padding-right: 18px;
  border-right: 1.5px solid var(--or-titre);
  color: var(--or-titre);
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1;
}

.presta h2 {
  margin: 0;
  color: var(--encre);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
}

.presta__texte p {
  max-width: 38em;
  margin: 12px 0 0;
  color: var(--encre);
  font-size: 1rem;
  line-height: 1.55;
}

.presta .etiquettes { margin-top: 14px; }
.presta .etiquettes li { background: #F1E6CF; color: var(--encre); font-size: .875rem; }

.presta__lien a {
  color: var(--or-fonce);
  font-weight: 500;
  text-decoration-color: var(--or-titre);
  text-underline-offset: 4px;
}

.presta__lien a:hover { color: var(--encre); }

/* Avis de la page Prestations */
.confiance { border-top: 1px solid var(--bande); background: var(--creme); }
.confiance .surtitre { max-width: 1520px; margin: 0 auto; }
.confiance__avis { margin-top: 20px; }
.confiance__lien { max-width: 1520px; margin: 20px auto 0; }
.confiance__lien a { color: var(--or-fonce); font-weight: 500; text-decoration-color: var(--or-titre); text-underline-offset: 4px; }

/* Bandeau devis court (pages intérieures) */
.bandeau-court {
  display: grid;
  gap: 18px;
  padding: 36px 16px;
  background: #3B2516;
  color: #F3EEE7;
}

.bandeau-court h2 {
  margin: 0;
  color: #F3EEE7;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.12;
}

.bandeau-court h2 .titre-or { display: block; }
.bandeau-court p { max-width: 40em; margin: 0; color: rgba(243, 238, 231, .9); }

.bandeau-court__boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.bouton-rouge {
  display: inline-flex;
  align-items: center;
  min-height: 50px;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--rouge);
  color: var(--blanc);
  font-weight: 600;
  text-decoration: none;
}

.bouton-rouge:hover { background: var(--rouge-fonce); }

@media (min-width: 900px) {
  .page-interne main { padding-top: 90px; }

  .page-haut { grid-template-columns: 1.05fr 1fr; align-items: stretch; }
  .page-haut__texte { padding: 28px 40px 44px clamp(32px, 5vw, 80px); align-self: center; }
  .page-haut h1 { font-size: clamp(2.5rem, 3.4vw, 3.25rem); }
  .page-haut__intro { font-size: clamp(1.0625rem, 1.2vw, 1.1875rem); }
  .page-haut__photo { position: relative; }
  .page-haut__photo img { aspect-ratio: auto; min-height: 420px; }
  .page-haut__photo::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 1;
    width: 22%;
    background: linear-gradient(90deg, var(--creme), rgba(248, 245, 240, 0));
  }

  .presta {
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(28px, 4vw, 64px);
    align-items: center;
    padding: 0 clamp(32px, 5vw, 80px) 0 0;
  }

  .presta__photo img { border-radius: 0; }
  .presta--inverse { padding: 0 0 0 clamp(32px, 5vw, 80px); }
  .presta--inverse .presta__photo { order: 2; }
  .presta__texte .presta__numero { font-size: clamp(2.5rem, 3.3vw, 3.25rem); }
  .presta h2 { font-size: clamp(1.5rem, 1.9vw, 1.875rem); }
  .presta__texte p { font-size: clamp(1rem, 1.1vw, 1.125rem); }

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

  .bandeau-court {
    grid-template-columns: auto 1fr;
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
    padding: 40px clamp(32px, 5vw, 80px);
  }

  .bandeau-court h2 { padding-right: clamp(28px, 4vw, 56px); border-right: 1.5px solid var(--or); font-size: clamp(2.25rem, 3vw, 3rem); }
}

/* Page Réalisations : filtres et chantiers */
.page-realisations { padding-top: 24px; }
.page-realisations__intro { max-width: 1520px; margin: 0 auto; }
.page-realisations h1 { margin: 0; color: var(--encre); font-size: 2.1rem; font-weight: 500; line-height: 1.12; }
.page-realisations h1::after { display: none; }

.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.filtre {
  min-height: 44px;
  padding: 0 20px;
  border: 1.5px solid var(--or-titre);
  border-radius: 999px;
  background: transparent;
  color: var(--or-fonce);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

.filtre[aria-pressed="true"] { background: var(--or-titre); color: var(--blanc); }
.filtre:hover { background: #F1E6CF; }
.filtre[aria-pressed="true"]:hover { background: var(--or-fonce); }
.filtre:focus-visible { outline: 2px solid var(--or-fonce); outline-offset: 2px; }

.chantiers--page { margin-top: 28px; }
.chantiers--page .chantier { scroll-margin-top: 96px; }
#zone, #savoir-faire, #avis, #prestations, #realisations, #faq { scroll-margin-top: 80px; }

.chantier__photo img,
.carrousel--chantier { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.carrousel--chantier { border-radius: 0; }

.chantier__corps--page { padding: 18px 20px 22px; }
.chantiers--page .chantier__corps--page h2 { margin: 0; color: var(--encre); font-size: 1.375rem; font-weight: 500; line-height: 1.25; }

.chantier__lieu {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  color: var(--or-fonce);
  font-weight: 500;
}

.chantier__corps--page .etiquettes { margin-top: 12px; }
.chantier__corps--page .etiquettes li { background: #F1E6CF; font-size: .875rem; }

.chantier__texte { margin: 12px 0 0; color: var(--encre); font-size: 1rem; line-height: 1.55; }

.chantier__prestation { margin: 12px 0 0; }
.chantier__prestation a { color: var(--or-fonce); font-weight: 500; text-decoration-color: var(--or-titre); text-underline-offset: 4px; }
.chantier__prestation a:hover { color: var(--encre); }

.filtres__vide { max-width: 1520px; margin: 16px auto 0; color: var(--texte); }
.filtres__vide:empty { display: none; }

.page-realisations__appel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  max-width: 1520px;
  margin: 40px auto 0;
  color: var(--encre);
  font-size: 1.25rem;
  font-weight: 500;
  text-align: center;
}

.page-realisations__appel a { color: var(--or-fonce); font-style: italic; text-decoration-color: var(--or-titre); text-underline-offset: 4px; }

@media (min-width: 900px) {
  .page-realisations { padding-top: 28px; }
  .page-realisations__intro { padding-left: clamp(0px, 1.5vw, 24px); }
  .page-realisations h1 { font-size: clamp(2.5rem, 3.4vw, 3.25rem); }
  .chantiers--page { grid-template-columns: repeat(2, 1fr); }
  .chantier__corps--page { padding: 22px 28px 26px; }
  .chantiers--page .chantier__corps--page h2 { font-size: clamp(1.375rem, 1.6vw, 1.75rem); }
  .chantier__texte { font-size: clamp(1rem, 1.1vw, 1.125rem); }
  .page-realisations__appel { font-size: clamp(1.25rem, 1.6vw, 1.625rem); }
  .page-realisations__appel::before,
  .page-realisations__appel::after { content: ""; flex: 0 1 90px; height: 1.5px; background: var(--or-titre); }
}

/* Page Savoir-faire : qui je suis, méthode en 5 étapes */
.qui { border-top: 1px solid var(--bande); background: var(--creme); }

.qui__grille {
  display: grid;
  gap: 18px;
  max-width: 1520px;
  margin: 0 auto;
}

.qui .qui__titre {
  margin: 0;
  padding-left: 18px;
  border-left: 2px solid var(--or-titre);
  font-size: 2rem;
}

.qui__texte p { max-width: 46em; margin: 0; color: var(--encre); font-size: 1.0625rem; line-height: 1.6; }

.qui__reperes {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 32px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.qui__reperes li {
  padding-left: 16px;
  border-left: 1.5px solid var(--or-titre);
  color: var(--or-fonce);
  font-size: 1.125rem;
  font-weight: 500;
}

.methode { background: var(--creme); }

.methode .methode__titre {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 1520px;
  margin: 0 auto;
  font-size: 2rem;
}

.methode .methode__titre::before,
.methode .methode__titre::after { content: ""; flex: 0 0 28px; height: 1.5px; background: var(--or-titre); }
.methode .methode__titre::after { flex: 0 1 80px; }

.methode__etapes {
  display: grid;
  gap: 24px;
  max-width: 1520px;
  margin: 24px auto 0;
  padding: 0;
  list-style: none;
}

.methode__etape h3 { margin: 6px 0 0; color: var(--encre); font-size: 1.1875rem; font-weight: 600; }
.methode__etape p { margin: 8px 0 0; color: var(--encre); font-size: 1rem; line-height: 1.55; }
.methode__etape .methode__numero { margin: 0; color: var(--or-titre); font-size: 2.75rem; font-weight: 400; line-height: 1; }

@media (min-width: 900px) {
  .qui__grille { grid-template-columns: minmax(200px, 1fr) 3fr; gap: clamp(28px, 4vw, 64px); padding-left: clamp(0px, 1.5vw, 24px); }
  .qui__texte { padding-left: clamp(24px, 3vw, 48px); border-left: 1px solid #E2D9CC; }
  .qui .qui__titre { font-size: clamp(2rem, 2.6vw, 2.5rem); align-self: start; }
  .qui__texte p { font-size: clamp(1.0625rem, 1.2vw, 1.1875rem); }
  .methode { padding-top: 8px; }
  .methode .methode__titre { font-size: clamp(2rem, 2.6vw, 2.5rem); }
  .methode__etapes { grid-template-columns: repeat(5, 1fr); gap: 0; }
  .methode__etape { padding: 0 clamp(16px, 1.6vw, 28px); border-left: 1px solid #E2D9CC; }
  .methode__etape:first-child { padding-left: 0; border-left: 0; }
  .methode__etape .methode__numero { font-size: clamp(2.75rem, 3.2vw, 3.5rem); }
}

/* Page Zone d'intervention : carte dessinée à gauche, communes à droite */
.page-zone { padding-top: 24px; }
.page-zone__ariane { max-width: 1520px; margin: 0 auto 18px; }

.page-zone__grille {
  display: grid;
  gap: 28px;
  max-width: 1520px;
  margin: 0 auto;
}

.page-zone__carte { margin: 0; min-width: 0; }
.page-zone__carte img { width: 100%; height: auto; }
.page-zone__carte figcaption { margin-top: 8px; color: var(--texte); font-size: .8125rem; }

.carte {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #E2D9CC;
  border-radius: 16px;
  font-family: "Jost", "Avenir Next", system-ui, sans-serif;
}

.carte__fond { fill: #EFE8DC; }
.carte__lac { fill: #A9C2CC; stroke: #94B0BC; stroke-width: 1; }
.carte__fleuve { fill: none; stroke: #A9C2CC; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.carte__dept { fill: #B9A88F; font-size: 13px; font-weight: 500; letter-spacing: .18em; }
.carte__point { fill: var(--or-titre); stroke: #FFFFFF; stroke-width: 1.5; }
.carte__repere { fill: var(--or-titre); stroke: #FFFFFF; stroke-width: 2; }
.carte__centre { fill: #FFFFFF; }
.carte__halo { fill: rgba(182, 142, 72, .22); }
.carte__etiquette rect { fill: #FFFFFF; stroke: #D8C4A0; stroke-width: 1; }
.carte__etiquette text { fill: var(--encre); font-size: 13px; font-weight: 500; }
.carte__etiquette--grande text { font-weight: 600; }

.page-zone__texte { min-width: 0; align-self: center; }
.page-zone h1 { margin: 0; color: var(--encre); font-size: 2.1rem; font-weight: 500; line-height: 1.12; }
.page-zone h1::after { display: none; }
.page-zone__groupes { margin-top: 22px; grid-template-columns: 1fr; }
.page-zone__groupes .zone__groupe h2 { margin: 0; color: var(--encre); font-size: 1.1875rem; font-weight: 500; line-height: 1.3; }
.page-zone__question { margin-top: 22px; text-align: left; }

@media (min-width: 900px) {
  .page-zone { padding-top: 28px; }
  .page-zone__ariane { padding-left: clamp(0px, 1.5vw, 24px); }
  .page-zone__grille { grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 5vw, 80px); padding-left: clamp(0px, 1.5vw, 24px); }
  .page-zone h1 { font-size: clamp(2.5rem, 3.4vw, 3.25rem); }
  .page-zone__groupes { grid-template-columns: 1fr 1fr; }
}

/* Réalisations et avis */
.bloc--realisations { background: #F3EEE7; color: var(--texte); }
.bloc--avis { background: var(--creme); color: var(--texte); padding-top: 32px; }

.titre-or-fonce--suite { display: inline; }

.bloc__texte {
  margin: 12px 0 0;
  color: var(--encre);
  font-size: 1.0625rem;
}

.chantiers,
.avis {
  display: grid;
  gap: 24px;
  margin-top: 28px;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}

.chantier {
  overflow: hidden;
  border-radius: 12px;
  background: var(--blanc);
  box-shadow: 0 1px 2px rgba(31, 26, 23, .06), 0 10px 28px rgba(31, 26, 23, .07);
}

/* Curseur avant / après : on glisse au doigt ou à la souris */
.comparateur {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.comparateur picture { display: block; }

.comparateur img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.comparateur__avant {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--position)) 0 0);
}

.comparateur__etiquette {
  position: absolute;
  top: 14px;
  padding: 4px 14px;
  border-radius: 8px;
  color: var(--blanc);
  font-size: .9375rem;
  font-weight: 500;
  pointer-events: none;
}

.comparateur__etiquette--avant { left: 14px; background: rgba(31, 26, 23, .78); }
.comparateur__etiquette--apres { right: 14px; background: var(--or-titre); }

.comparateur__poignee {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--position);
  width: 2px;
  background: var(--blanc);
  transform: translateX(-1px);
  pointer-events: none;
}

.comparateur__poignee::after {
  content: "\2039\00a0\203A";
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--blanc);
  box-shadow: 0 2px 10px rgba(31, 26, 23, .25);
  color: var(--encre);
  font-size: 1.375rem;
  line-height: 1;
  transform: translate(-50%, -50%);
}

.comparateur__curseur {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.comparateur:focus-within .comparateur__poignee::after { outline: 2px solid var(--or-fonce); outline-offset: 2px; }

.chantier__corps {
  position: relative;
  padding: 18px 72px 22px 20px;
}

.chantier h3 {
  margin: 0;
  color: var(--encre);
  font-size: 1.3125rem;
  font-weight: 500;
  line-height: 1.3;
}

.chantier__point { margin: 0 .25em; color: var(--or-titre); }

.chantier__lien {
  margin: 8px 0 0;
  color: var(--texte);
  font-size: 1rem;
}

.chantier__lien span { margin-right: 6px; color: var(--or-titre); }
.chantier__lien a { color: var(--encre); text-underline-offset: 3px; }
.chantier__lien a:hover { color: var(--or-fonce); }

.chantier__fleche {
  position: absolute;
  top: 50%;
  right: 20px;
  width: 40px;
  height: 40px;
  transform: translateY(-50%);
}

.chantier__fleche .carte__fleche { top: 0; right: 0; }
.chantier__fleche:hover .carte__fleche circle { fill: var(--or-titre); }
.chantier__fleche:hover .carte__fleche path { stroke: var(--blanc); }

.avis__carte {
  padding: 22px 24px 24px;
  border-radius: 12px;
  background: var(--blanc);
  box-shadow: 0 1px 2px rgba(31, 26, 23, .05), 0 8px 24px rgba(31, 26, 23, .06);
}

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

.avis__pastille {
  display: grid;
  flex: none;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: var(--blanc);
  font-size: 1.125rem;
  font-weight: 500;
}

.avis__auteur {
  display: flex;
  flex-direction: column;
  margin: 0;
  color: var(--encre);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.25;
}

.avis__source {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  color: var(--texte);
  font-size: .875rem;
  font-weight: 400;
}

.avis__note {
  margin: 14px 0 0;
  color: #E3A72F;
  font-size: 1.0625rem;
  letter-spacing: .1em;
  line-height: 1;
}

.avis__date {
  color: var(--texte);
  font-size: .875rem;
  letter-spacing: 0;
}

.avis__lien {
  display: inline-block;
  margin-top: 14px;
  color: var(--or-fonce);
  font-size: .9375rem;
  font-weight: 500;
  text-underline-offset: 3px;
}

.avis__lien:hover { color: var(--encre); }

.avis blockquote { margin: 12px 0 0; }

.avis blockquote p {
  margin: 0;
  color: var(--encre);
  font-size: 1.0625rem;
  font-style: italic;
  line-height: 1.5;
}


@media (min-width: 760px) {
  .cartes { grid-template-columns: repeat(3, 1fr); }
  .bandeau-confiance span,
  .bandeau-confiance .bandeau-confiance__point { display: inline; }
}

@media (min-width: 900px) {
  .entete.fixe {
    height: 90px;
    padding-top: 0;
  }

  .entete.fixe .entete__logo {
    padding-right: clamp(24px, 7vw, 122px);
    border-right: 1px solid rgba(31, 26, 23, .55);
  }

  .entete.fixe .entete__logo img { height: 72px; }
  .entete.fixe .menu a:hover,
  .entete.fixe .menu a[aria-current] { border-color: var(--or-titre); color: var(--encre); }

  .bandeau-confiance { font-size: clamp(.9375rem, 1.05vw, 1.0625rem); }

  .prestations,
  .bloc { padding: 36px clamp(32px, 5vw, 80px) 40px; }

  .prestations__intro,
  .bloc__intro { padding-left: clamp(0px, 1.5vw, 24px); }

  .surtitre { font-size: clamp(1rem, 1.15vw, 1.1875rem); }

  .prestations h2,
  .bloc h2 { font-size: clamp(2.5rem, 3.4vw, 3.5rem); }

  .bloc__texte { font-size: clamp(1.0625rem, 1.2vw, 1.25rem); }
  .chantiers { grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 3.2vw, 52px); }
  .chantier__corps { padding: 22px 88px 24px 28px; }
  .chantier h3 { font-size: clamp(1.375rem, 1.6vw, 1.75rem); }
  .chantier__lien { font-size: clamp(1rem, 1.1vw, 1.125rem); }
  .avis__carte { padding: 24px 32px 28px; }
  .avis blockquote p { font-size: clamp(1.0625rem, 1.2vw, 1.25rem); }

  .prestations__texte { font-size: clamp(1.0625rem, 1.2vw, 1.25rem); }

  .cartes { gap: clamp(20px, 1.8vw, 30px); }

  .carte__corps { padding: 20px 24px 22px; }
  .carte__numero { font-size: clamp(1.625rem, 1.75vw, 1.875rem); }
  .carte h3 { font-size: clamp(1.375rem, 1.5vw, 1.5625rem); }
  .carte__corps > p:not(.carte__numero) { font-size: clamp(1rem, 1.05vw, 1.125rem); }
  .etiquettes li { font-size: clamp(.9375rem, .95vw, 1rem); }

  .prestations__tout a { font-size: clamp(1.25rem, 1.45vw, 1.5rem); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* === Cookies et pages légales === */
.cookies {
  position: fixed;
  z-index: 4;
  right: 12px;
  bottom: calc(58px + env(safe-area-inset-bottom) + 12px);
  left: 12px;
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(217, 184, 120, .55);
  border-radius: 12px;
  background: var(--voile);
  color: #F3EEE7;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .35);
}
.cookies[hidden] { display: none !important; }
.cookies__texte { display: grid; gap: 4px; font-size: .9375rem; line-height: 1.5; }
.cookies__texte b { color: var(--or); font-weight: 600; }
.cookies__texte a { color: #F3EEE7; text-decoration-color: rgba(217, 184, 120, .6); text-underline-offset: 3px; }
.cookies__boutons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cookies__btn {
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--or);
  border-radius: 999px;
  background: transparent;
  color: #F3EEE7;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.cookies__btn--accepter { background: var(--or); color: var(--voile); }
.cookies__btn:focus-visible, .pied__cookies:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }
.pied__cookies {
  padding: 0;
  border: 0;
  background: none;
  color: #F3EEE7;
  font: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(217, 184, 120, .6);
  text-underline-offset: 3px;
  cursor: pointer;
}
.pied__cookies:hover { color: var(--or); }

.legal { padding: 24px 16px 56px; background: var(--creme); color: var(--texte); }
.legal__contenu { max-width: 46rem; margin: 0 auto; }
.legal h1 { margin: 0 0 8px; color: var(--encre); font-size: 2.1rem; font-weight: 500; line-height: 1.12; }
.legal h1::after { display: none; }
.legal__maj { margin: 0 0 8px; color: var(--or-fonce); font-size: .875rem; }
.legal h2 {
  margin: 40px 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(162, 122, 53, .35);
  color: var(--encre);
  font-size: 1.25rem;
  font-weight: 600;
  scroll-margin-top: 130px;
}
.legal p, .legal li { margin: 0 0 12px; font-size: 1rem; line-height: 1.7; }
.legal ul { padding-left: 20px; margin: 0 0 12px; }
.legal a { color: var(--or-fonce); text-underline-offset: 3px; }
.legal b { color: var(--encre); }
.legal__bouton { margin: 4px 0 12px; }
.legal .cookies__btn { color: var(--voile); border-color: var(--or-fonce); }
.legal .cookies__btn--accepter { color: var(--voile); }

@media (min-width: 900px) {
  .cookies {
    right: auto;
    bottom: 20px;
    left: 50%;
    width: min(880px, calc(100% - 48px));
    transform: translateX(-50%);
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 24px;
    padding: 16px 20px;
  }
  .cookies__boutons { grid-template-columns: repeat(2, 170px); }
  .legal { padding: 48px 32px 96px; }
  .legal h1 { font-size: 2.8rem; }
}