/* VH TP — maquette
   Direction : la carte de visite. Un ciel ocre, une terre sombre, une ligne d'horizon en gravats.
   Angles francs, bordures pleines, pas d'ombres. */

@import url("https://fonts.googleapis.com/css2?family=Arvo:wght@400;700&family=Saira+Semi+Condensed:wght@400;500;700&display=swap");

:root {
  /* Couleurs relevées sur la carte (photo), puis ajustées pour le contraste */
  --ciel: #f0c468;        /* fond ocre de la carte */
  --ciel-pale: #ece4d2;   /* beige neutre : emplacements, focus */
  --sable: #f7f5f0;       /* blanc cassé : fond de lecture */
  --blanc: #fcfbf8;       /* formulaires, encarts */
  --pierre: #ebe6dc;      /* sections alternées */
  --terre: #2e1a0b;       /* silhouette / texte */
  --terre-2: #3f230a;     /* sol de la carte */
  --argile: #6f4821;      /* brun intermédiaire */
  --brique: #8f3a1e;      /* accent rare : focus, survol */

  --display: "Arvo", "Rockwell", Georgia, serif;
  --text: "Saira Semi Condensed", "Arial Narrow", system-ui, sans-serif;

  /* Échelle d'espacement : base 8 */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s6: 48px; --s8: 64px; --s12: 96px; --s16: 128px;

  --trait: 2px solid var(--terre);
  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 48px);
  --sol-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 80 L0 36 L3 28 L9 31 L12 38 L15 35 L19 36 L22 38 L29 33 L40 38 L46 34 L52 26 L61 34 L67 42 L70 34 L74 42 L77 34 L81 32 L88 30 L92 22 L94 17 L98 22 L101 32 L104 26 L110 29 L113 30 L120 27 L131 26 L138 26 L145 22 L156 26 L163 42 L168 39 L177 38 L182 34 L189 32 L201 30 L208 42 L214 34 L225 36 L231 36 L237 27 L247 34 L253 26 L257 22 L264 21 L268 42 L271 36 L275 38 L278 40 L283 31 L291 38 L296 34 L299 26 L304 33 L307 36 L310 27 L316 33 L319 38 L322 31 L326 36 L329 36 L335 27 L346 36 L352 34 L356 25 L364 29 L368 34 L370 28 L374 29 L377 40 L382 32 L389 35 L394 36 L396 27 L400 34 L402 30 L405 21 L410 30 L413 42 L418 38 L425 37 L430 42 L436 34 L445 36 L450 40 L453 36 L457 37 L460 22 L467 16 L478 21 L485 22 L492 16 L503 17 L510 22 L515 14 L524 21 L529 30 L532 26 L536 29 L539 42 L543 40 L550 39 L554 30 L558 24 L566 30 L570 30 L576 23 L585 26 L591 36 L594 34 L600 33 L603 32 L609 24 L618 29 L623 22 L626 13 L631 17 L634 22 L636 17 L640 22 L643 42 L649 38 L659 42 L665 36 L667 33 L671 36 L674 30 L681 27 L692 28 L699 38 L702 33 L706 34 L709 22 L712 16 L718 20 L721 36 L727 33 L738 36 L744 40 L750 31 L760 37 L766 26 L769 22 L773 26 L776 36 L780 27 L788 30 L792 30 L799 28 L810 29 L816 32 L821 28 L830 27 L835 32 L837 26 L841 27 L843 34 L847 27 L855 33 L859 36 L863 29 L870 31 L874 42 L878 37 L884 36 L888 22 L892 17 L899 18 L903 40 L908 38 L917 40 L922 26 L928 20 L939 25 L945 36 L951 29 L961 34 L967 34 L971 31 L978 33 L982 40 L986 33 L992 39 L996 40 L998 31 L1002 35 L1004 36 L1007 33 L1011 33 L1014 42 L1020 38 L1031 39 L1037 36 L1040 28 L1044 33 L1047 22 L1050 18 L1054 21 L1057 30 L1059 26 L1063 26 L1065 40 L1068 31 L1074 35 L1077 36 L1080 32 L1086 36 L1089 38 L1092 34 L1097 35 L1100 42 L1104 40 L1110 40 L1114 42 L1119 37 L1126 36 L1131 36 L1135 28 L1143 30 L1147 30 L1149 23 L1153 27 L1156 32 L1162 28 L1171 28 L1177 30 L1184 28 L1195 24 L1201 40 L1204 38 L1210 34 L1214 30 L1217 26 L1223 27 L1227 34 L1234 32 L1245 32 L1252 32 L1259 23 L1270 26 L1276 34 L1283 32 L1294 33 L1301 42 L1305 40 L1313 36 L1317 34 L1324 25 L1335 30 L1341 38 L1344 29 L1348 36 L1351 32 L1358 27 L1369 27 L1375 26 L1381 17 L1391 22 L1397 42 L1404 36 L1415 38 L1421 42 L1427 38 L1437 39 L1440 34 L1440 80 Z' fill='%23000'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--sable);
  color: var(--terre);
  font: 400 1.125rem/1.55 var(--text);
}
img, svg { display: block; max-width: 100%; }
figure { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--brique); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.05; margin: 0; letter-spacing: -0.01em; }
p { margin: 0 0 var(--s2); max-width: 60ch; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.label {
  font: 700 0.8125rem/1 var(--text);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Ligne de sol (signature) ---------- */
.sol {
  height: clamp(36px, 5vw, 72px);
  background: var(--terre-2);
  -webkit-mask: var(--sol-mask) center / 100% 100% no-repeat;
          mask: var(--sol-mask) center / 100% 100% no-repeat;
}
.sol--nuit { background: var(--terre); }
.sol--flip { transform: scaleY(-1); }

/* ---------- En-tête ---------- */
.top {
  position: sticky; top: 0; z-index: 10;
  background: var(--blanc);
  border-bottom: 2px solid transparent;
  transition: border-color .2s;
}
.top.is-scrolled { border-bottom-color: var(--terre); }
.top__in { display: flex; align-items: center; gap: var(--s4); height: 72px; }
.brand { font: 700 1.75rem/1 var(--display); text-decoration: none; letter-spacing: 0.02em; }
.brand small { display: block; font: 500 0.75rem/1.2 var(--text); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 2px; }
.nav { display: flex; gap: var(--s3); margin-left: auto; }
.nav a { text-decoration: none; font-weight: 500; padding: var(--s1) 0; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--terre); }
.top__tel {
  font: 700 1.125rem/1 var(--text); letter-spacing: 0.04em; text-decoration: none;
  border: var(--trait); padding: 12px var(--s2);
}
.top__tel:hover { background: var(--terre); color: var(--ciel); }
.menu-btn { display: none; }

@media (max-width: 820px) {
  .top__in { height: 60px; gap: var(--s2); }
  .brand { font-size: 1.5rem; }
  .brand small { display: none; }
  .top__tel { display: none; }
  .menu-btn {
    display: block; margin-left: auto; background: none; border: var(--trait);
    font: 700 0.875rem/1 var(--text); text-transform: uppercase; letter-spacing: .1em;
    padding: 12px 14px; color: var(--terre); cursor: pointer;
  }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0; background: var(--blanc); border-bottom: var(--trait);
  }
  .nav.is-open { display: flex; }
  .nav a { padding: var(--s2) var(--gutter); border-top: 1px solid rgba(46,26,11,.25); font-size: 1.25rem; }
}

/* Barre d'appel mobile : sur un chantier, on appelle. */
.callbar { display: none; }
@media (max-width: 820px) {
  .callbar {
    display: grid; grid-template-columns: 1fr 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    border-top: 2px solid var(--terre);
  }
  .callbar a {
    display: flex; align-items: center; justify-content: center; min-height: 56px;
    font: 700 1rem/1 var(--text); text-transform: uppercase; letter-spacing: .06em; text-decoration: none;
  }
  .callbar a:first-child { background: var(--terre); color: var(--ciel); }
  .callbar a:last-child { background: var(--blanc); }
  body { padding-bottom: 58px; }
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--s1);
  font: 700 1rem/1 var(--text); text-transform: uppercase; letter-spacing: .06em;
  text-decoration: none; padding: 18px var(--s3); border: var(--trait);
  background: var(--terre); color: var(--ciel); cursor: pointer;
  transition: background .15s, color .15s;
}
.btn:hover { background: var(--brique); border-color: var(--brique); color: #fff; }
.btn--ghost { background: transparent; color: var(--terre); }
.btn--ghost:hover { background: var(--terre); border-color: var(--terre); color: var(--ciel); }
.btn .arr { transition: transform .15s; }
.btn:hover .arr { transform: translateX(4px); }

/* ---------- Emplacement photo (à remplacer) ---------- */
.ph {
  position: relative; background-color: var(--pierre);
  background-image: repeating-linear-gradient(135deg, rgba(111,72,33,.14) 0 2px, transparent 2px 14px);
  border: 2px solid var(--argile);
  display: flex; align-items: flex-end;
  min-height: 200px;
}
.ph__tag {
  margin: var(--s2); background: var(--sable); border: 1px solid var(--argile);
  padding: 6px 10px; font: 500 0.8125rem/1.35 var(--text); color: var(--argile); max-width: 34ch;
}
.ph__tag b { display: block; text-transform: uppercase; letter-spacing: .1em; font-size: .6875rem; }
.ph--dark { background-color: #4a2c12; border-color: #7a5430;
  background-image: repeating-linear-gradient(135deg, rgba(240,196,104,.12) 0 2px, transparent 2px 14px); }

/* ---------- HERO ---------- */
.hero { background: var(--ciel); position: relative; overflow: hidden; }
.hero__grid {
  display: grid; grid-template-columns: 1.05fr 1fr; align-items: end;
  min-height: min(76vh, 720px); padding-top: var(--s6);
}
.hero__pelle { align-self: end; margin-left: calc(var(--gutter) * -1); margin-bottom: calc(clamp(36px, 5vw, 72px) * -0.55); }
.hero .sol { position: relative; }
.hero__pelle svg { width: 100%; max-width: 640px; color: var(--terre-2); }
.hero__txt { padding-bottom: var(--s12); }
.hero__txt .label { margin-bottom: var(--s3); display: block; }
.hero h1 { font-size: clamp(2.25rem, 4.6vw, 4rem); margin-bottom: var(--s3); max-width: 13ch; }
.hero h1 em { font-style: normal; font-weight: 400; display: block; font-size: .62em; line-height: 1.15; margin-top: .3em; }
.hero__lead { font-size: 1.25rem; max-width: 40ch; margin-bottom: var(--s4); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s2); }

.ground { background: var(--terre-2); color: var(--ciel); }
.ground__in {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--s4);
  padding-top: var(--s2); padding-bottom: var(--s6);
}
.ground__zone { font-size: 1rem; color: var(--ciel-pale); align-self: end; }
.ground__zone strong { color: var(--ciel); }
.ground__tel {
  font: 500 clamp(2.25rem, 5vw, 4rem)/1 var(--text); letter-spacing: 0.03em;
  text-decoration: none; display: inline-block;
}
.ground__tel:hover { color: #fff; }
.ground__mail { display: block; font-size: clamp(1.125rem, 2vw, 1.5rem); margin-top: var(--s1); text-decoration: none; }
.ground__mail:hover { text-decoration: underline; }

@media (max-width: 820px) {
  .hero__grid { grid-template-columns: 1fr; min-height: 0; padding-top: var(--s4); }
  .hero__txt { order: -1; padding-bottom: var(--s3); }
  .hero__pelle { width: 78%; margin-left: auto; margin-right: calc(var(--gutter) * -1); transform: scaleX(-1); }
  .ground__in { grid-template-columns: 1fr; gap: var(--s3); }
  .ground__zone { order: 2; }
}

/* ---------- Liste des travaux (accueil) ---------- */
.section { padding: var(--s12) 0; }
.section__head { display: grid; grid-template-columns: 1fr 2fr; gap: var(--s4); margin-bottom: var(--s6); align-items: end; }
.section__head h2 { font-size: clamp(1.875rem, 3.4vw, 2.75rem); }
.section__head p { margin: 0; color: var(--argile); }

.jobs { list-style: none; margin: 0; padding: 0; border-top: var(--trait); }
.job { border-bottom: var(--trait); }
.job a {
  display: grid; grid-template-columns: 72px 1.1fr 1.4fr 160px; gap: var(--s3); align-items: center;
  padding: var(--s3) 0; text-decoration: none; position: relative;
  transition: background .2s, padding .2s;
}
.job__n { font: 400 1rem/1 var(--display); color: var(--argile); }
.job h3 { font-size: clamp(1.375rem, 2.4vw, 2rem); }
.job p { margin: 0; color: var(--argile); }
.job__more { font: 700 .875rem/1 var(--text); text-transform: uppercase; letter-spacing: .08em; text-align: right; }
.job a:hover { background: var(--ciel); padding-left: var(--s2); padding-right: var(--s2); }
.job a:hover .job__n, .job a:hover p { color: var(--terre); }
@media (max-width: 820px) {
  .section { padding: var(--s8) 0; }
  .section__head { grid-template-columns: 1fr; gap: var(--s2); margin-bottom: var(--s4); }
  .job a { grid-template-columns: 40px 1fr; gap: 4px var(--s2); padding: var(--s2) 0; }
  .job p { grid-column: 2; font-size: 1rem; }
  .job__more { display: none; }
}

/* ---------- Chantier mis en avant ---------- */
.feature { background: var(--terre); color: var(--sable); padding-bottom: var(--s12); }
.feature__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s3); }
.feature__img { grid-column: 1 / span 8; min-height: 520px; margin-top: calc(var(--s8) * -1); }
.feature__txt { grid-column: 9 / span 4; grid-row: 1 / span 2; padding-top: var(--s8); }
.feature__txt .label { color: var(--ciel); display: block; margin-bottom: var(--s2); }
.feature__txt h2 { font-size: clamp(1.75rem, 2.8vw, 2.375rem); margin-bottom: var(--s3); }
.feature__txt dl { margin: var(--s4) 0; border-top: 1px solid rgba(251,244,228,.3); }
.feature__txt dl div { display: flex; justify-content: space-between; gap: var(--s2); padding: 10px 0; border-bottom: 1px solid rgba(251,244,228,.3); }
.feature__txt dt { color: var(--ciel-pale); }
.feature__txt dd { margin: 0; text-align: right; }
.feature .btn--ghost { color: var(--ciel); border-color: var(--ciel); }
.feature .btn--ghost:hover { background: var(--ciel); color: var(--terre); }
.feature__sub { grid-column: 5 / span 4; grid-row: 2; min-height: 240px; margin: calc(var(--s12) * -1) var(--s3) 0 var(--s6); outline: 8px solid var(--terre); }
@media (max-width: 960px) {
  .feature__img, .feature__txt, .feature__sub { grid-column: 1 / -1; }
  .feature__img { min-height: 300px; margin-top: calc(var(--s4) * -1); }
  .feature__txt { padding-top: var(--s2); }
  .feature__sub { display: none; }
  .feature__txt { grid-row: auto; }
}

/* ---------- Déroulé d'un chantier ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); border-top: var(--trait); counter-reset: s; }
.step { padding: var(--s3) var(--s3) 0 0; position: relative; }
.step + .step { padding-left: var(--s3); border-left: 1px solid rgba(46,26,11,.3); }
.step::before {
  counter-increment: s; content: counter(s);
  display: block; font: 700 4.5rem/1 var(--display); color: transparent;
  -webkit-text-stroke: 2px var(--terre); margin-bottom: var(--s2);
}
.step h3 { font-size: 1.375rem; margin-bottom: var(--s1); }
.step p { font-size: 1rem; }
@media (max-width: 820px) {
  .steps { grid-template-columns: 1fr; }
  .step, .step + .step { display: grid; grid-template-columns: 56px 1fr; padding: var(--s2) 0; border-left: 0; border-bottom: 1px solid rgba(46,26,11,.3); }
  .step::before { font-size: 2.5rem; margin: 0; grid-row: span 2; }
}

/* ---------- Vincent + avis ---------- */
.who { background: var(--pierre); }
.who__grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s8); align-items: start; }
.who__img { min-height: 480px; transform: rotate(-1.2deg); }
.who h2 { font-size: clamp(2rem, 3.8vw, 3.25rem); margin-bottom: var(--s4); max-width: 16ch; }
.who__quote { font: 400 1.375rem/1.45 var(--display); border-left: 4px solid var(--terre); padding-left: var(--s3); margin: var(--s4) 0; max-width: 40ch; }
.reviews { margin-top: var(--s6); border: var(--trait); background: var(--blanc); }
.reviews__head { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border-bottom: var(--trait); flex-wrap: wrap; }
.reviews__score { font: 700 1.5rem/1 var(--display); }
.reviews__body { padding: var(--s3); color: var(--argile); font-size: 1rem; }
.reviews__body code { font-family: var(--text); background: var(--ciel-pale); padding: 0 4px; }
@media (max-width: 960px) {
  .who__grid { grid-template-columns: 1fr; gap: var(--s4); }
  .who__img { min-height: 320px; transform: none; }
}

/* ---------- Pied de page ---------- */
.foot { background: var(--terre); color: var(--sable); }
.foot__cta { padding: var(--s8) 0 var(--s6); display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--s6); align-items: end; }
.foot__cta h2 { font-size: clamp(2rem, 4.4vw, 3.75rem); color: var(--ciel); }
.foot__tel { font: 500 clamp(2rem, 4vw, 3.25rem)/1 var(--text); letter-spacing: .03em; color: var(--ciel); text-decoration: none; }
.foot__tel:hover { color: #fff; }
.foot__cta .btn { margin-top: var(--s3); background: var(--ciel); color: var(--terre); border-color: var(--ciel); }
.foot__cta .btn:hover { background: #fff; border-color: #fff; }
.foot__base {
  border-top: 1px solid rgba(251,244,228,.25); padding: var(--s3) 0; font-size: .875rem; color: var(--ciel-pale);
  display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); justify-content: space-between;
}
.foot__base a { text-decoration: none; }
.foot__base a:hover { text-decoration: underline; }
@media (max-width: 820px) { .foot__cta { grid-template-columns: 1fr; gap: var(--s3); } }

/* ---------- En-tête de page intérieure ---------- */
.phead { background: var(--pierre); padding: var(--s8) 0 var(--s4); }
.phead__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--s6); align-items: end; }
.phead h1 { font-size: clamp(2.5rem, 6vw, 5rem); }
.phead p { margin: 0; font-size: 1.25rem; }
@media (max-width: 820px) { .phead { padding-top: var(--s6); } .phead__grid { grid-template-columns: 1fr; gap: var(--s3); } }

/* ---------- Prestations ---------- */
.svc-layout { display: grid; grid-template-columns: 220px 1fr; gap: var(--s8); padding-top: var(--s8); padding-bottom: var(--s12); }
.svc-nav { position: sticky; top: 104px; align-self: start; border-top: var(--trait); }
.svc-nav a { display: flex; gap: var(--s2); padding: 12px 0; border-bottom: 1px solid rgba(46,26,11,.3); text-decoration: none; font-weight: 500; }
.svc-nav a span { color: var(--argile); font-family: var(--display); }
.svc-nav a:hover, .svc-nav a.is-active { color: var(--brique); }
.svc { padding-bottom: var(--s12); scroll-margin-top: 96px; }
.svc + .svc { border-top: var(--trait); padding-top: var(--s6); }
.svc__head { display: flex; align-items: baseline; gap: var(--s3); margin-bottom: var(--s4); }
.svc__head span { font: 400 1.25rem/1 var(--display); color: var(--argile); }
.svc h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
.svc__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); }
.svc__cols h3 { font: 700 .8125rem/1 var(--text); text-transform: uppercase; letter-spacing: .12em; margin-bottom: var(--s2); }
.ticks { list-style: none; padding: 0; margin: 0 0 var(--s3); border-top: 1px solid rgba(46,26,11,.3); }
.ticks li { padding: 10px 0 10px 28px; border-bottom: 1px solid rgba(46,26,11,.3); position: relative; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 19px; width: 14px; height: 2px; background: var(--terre); }
.svc .ph { min-height: 340px; margin-top: var(--s4); }
.note { background: var(--ciel-pale); border-left: 4px solid var(--terre); padding: var(--s2) var(--s3); font-size: 1rem; margin-top: var(--s3); }
.note strong { display: block; }
@media (max-width: 960px) {
  .svc-layout { grid-template-columns: 1fr; gap: var(--s4); padding-top: 0; }
  .svc-nav { position: sticky; top: 60px; z-index: 5; background: var(--sable); display: flex; overflow-x: auto; border-top: 0; border-bottom: var(--trait); margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); }
  .svc-nav a { flex: none; border-bottom: 0; padding: 14px var(--s2) 14px 0; }
  .svc-nav a span { display: none; }
  .svc__cols { grid-template-columns: 1fr; gap: var(--s3); }
  .svc .ph { min-height: 240px; }
}

/* Coupe de terrain (signature n°2) */
.coupe { margin: var(--s4) 0 0; border: var(--trait); background: var(--sable); }
.coupe__cap { display: flex; justify-content: space-between; gap: var(--s2); padding: 12px var(--s3); border-bottom: var(--trait); flex-wrap: wrap; }
.coupe__body { display: grid; grid-template-columns: 1.3fr 1fr; }
.coupe__fig { border-right: var(--trait); }
.coupe__fig svg { width: 100%; height: auto; }
.coupe__fig .layer { cursor: pointer; transition: opacity .15s; }
.coupe__fig.has-focus .layer { opacity: .35; }
.coupe__fig.has-focus .layer.is-on { opacity: 1; }
.coupe__list { list-style: none; margin: 0; padding: 0; }
.coupe__list li { border-bottom: 1px solid rgba(46,26,11,.3); }
.coupe__list li:last-child { border-bottom: 0; }
.coupe__list button {
  all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: grid; grid-template-columns: 18px 1fr; gap: 4px 12px;
  padding: 12px var(--s3); font-size: 1rem;
}
.coupe__list button:focus-visible { outline: 3px solid var(--brique); outline-offset: -3px; }
.coupe__list .sw { width: 18px; height: 18px; border: 1px solid var(--terre); margin-top: 3px; }
.coupe__list strong { font-weight: 700; }
.coupe__list small { grid-column: 2; color: var(--argile); font-size: .9375rem; display: none; }
.coupe__list button.is-on { background: var(--ciel-pale); }
.coupe__list button.is-on small { display: block; }
@media (max-width: 820px) {
  .coupe__body { grid-template-columns: 1fr; }
  .coupe__fig { border-right: 0; border-bottom: var(--trait); }
}

/* ---------- Réalisations ---------- */
.filters { display: flex; flex-wrap: wrap; gap: var(--s1); padding: var(--s4) 0; border-bottom: var(--trait); }
.filters button {
  font: 500 1rem/1 var(--text); padding: 12px var(--s2); border: var(--trait); background: transparent; color: var(--terre); cursor: pointer;
}
.filters button[aria-pressed="true"] { background: var(--terre); color: var(--ciel); }
.filters button:hover:not([aria-pressed="true"]) { background: var(--ciel); }
.filters__count { margin-left: auto; align-self: center; color: var(--argile); font-size: 1rem; }
@media (max-width: 820px) {
  .filters { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(var(--gutter) * -1); padding: var(--s3) var(--gutter); }
  .filters button { flex: none; }
  .filters__count { display: none; }
}

.ba { margin: var(--s6) 0; }
.ba__frame { position: relative; aspect-ratio: 16 / 8; overflow: hidden; border: var(--trait); user-select: none; touch-action: pan-y; }
.ba__frame .ph { position: absolute; inset: 0; border: 0; min-height: 0; }
.ba__after { clip-path: inset(0 0 0 var(--pos, 50%)); }
.ba__handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; background: var(--terre); pointer-events: none; }
.ba__handle::after {
  content: "AVANT  ·  APRÈS"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--terre); color: var(--ciel); font: 700 .75rem/1 var(--text); letter-spacing: .12em; padding: 10px 12px; white-space: pre;
}
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.ba__range:focus-visible + .ba__handle::after { outline: 3px solid var(--brique); outline-offset: 2px; }
.ba__cap { display: flex; justify-content: space-between; gap: var(--s2); padding-top: 12px; font-size: 1rem; flex-wrap: wrap; }
.ba__cap span { color: var(--argile); }
@media (max-width: 820px) { .ba__frame { aspect-ratio: 4 / 3; } }

.works { display: grid; grid-auto-flow: dense; grid-template-columns: repeat(6, 1fr); gap: var(--s6) var(--s3); padding-bottom: var(--s12); }
.work { grid-column: span 2; }
.work--w { grid-column: span 4; }
.work--t .ph { min-height: 420px; }
.work .ph { min-height: 260px; }
.work--w .ph { min-height: 360px; }
.work figcaption { padding-top: 12px; display: grid; grid-template-columns: 1fr auto; gap: 2px var(--s2); }
.work figcaption strong { font: 700 1.125rem/1.3 var(--display); }
.work figcaption span { color: var(--argile); font-size: .9375rem; }
.work figcaption .cat { grid-column: 2; grid-row: 1; text-transform: uppercase; letter-spacing: .1em; font-size: .75rem; font-weight: 700; }
.work[hidden] { display: none; }
@media (max-width: 820px) {
  .works { grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s2); }
  .work, .work--w { grid-column: span 2; }
  .work--half { grid-column: span 1; }
  .work--half .ph { min-height: 200px; }
  .work--half figcaption { grid-template-columns: 1fr; }
  .work--half figcaption .cat { grid-column: 1; grid-row: auto; }
}

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s8); padding-top: var(--s8); padding-bottom: var(--s12); }
.contact__direct { border-top: var(--trait); padding-top: var(--s3); }
.contact__direct .big { font: 500 clamp(2rem, 3.6vw, 3rem)/1 var(--text); letter-spacing: .03em; text-decoration: none; display: block; margin: var(--s1) 0 var(--s2); }
.contact__direct .big:hover { color: var(--brique); }
.contact__direct dl { margin: var(--s4) 0 0; }
.contact__direct dl div { padding: 12px 0; border-top: 1px solid rgba(46,26,11,.3); display: grid; grid-template-columns: 120px 1fr; gap: var(--s2); }
.contact__direct dt { color: var(--argile); }
.contact__direct dd { margin: 0; }

.form { border: var(--trait); background: var(--blanc); }
.form__sec { padding: var(--s3); border-bottom: var(--trait); }
.form__sec:last-of-type { border-bottom: 0; }
.form legend, .form .lbl { font: 700 .8125rem/1 var(--text); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 12px; display: block; padding: 0; }
.form fieldset { border: 0; margin: 0; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s1); }
.chips label { position: relative; }
.chips input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chips span { display: block; padding: 10px 14px; border: 1px solid var(--terre); font-size: 1rem; }
.chips input:checked + span { background: var(--terre); color: var(--ciel); }
.chips input:focus-visible + span { outline: 3px solid var(--brique); outline-offset: 2px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.field { margin-bottom: var(--s3); }
.field:last-child { margin-bottom: 0; }
.field input, .field textarea, .field select {
  width: 100%; font: 400 1.0625rem/1.4 var(--text); color: var(--terre);
  background: var(--sable); border: 0; border-bottom: 2px solid var(--terre); padding: 12px 10px;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; background: var(--ciel-pale); }
.field .hint { font-size: .875rem; color: var(--argile); margin-top: 6px; }
.form__end { display: flex; align-items: center; gap: var(--s3); padding: var(--s3); border-top: var(--trait); flex-wrap: wrap; }
.form__end p { margin: 0; font-size: .9375rem; color: var(--argile); }
.form__ok { display: none; padding: var(--s3); background: var(--ciel); border-top: var(--trait); }
.form.is-sent .form__ok { display: block; }
@media (max-width: 960px) {
  .contact { grid-template-columns: 1fr; gap: var(--s6); padding-top: var(--s4); }
  .row { grid-template-columns: 1fr; gap: 0; }
  .row .field { margin-bottom: var(--s3); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* Sol inversé : le fond de la section précédente « retombe » en gravats sur la suivante */
.sol--down { transform: scaleY(-1); }
.sol--down.on-sable { background: var(--sable); }
.sol--down.on-ciel { background: var(--ciel); }
.sol--down.on-pierre { background: var(--pierre); }
.foot > .sol--down { margin-bottom: var(--s2); }

/* ---------- Photos réelles ---------- */
.ph--img { background: var(--terre); border: 0; }
.ph--img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph__cap {
  position: relative; z-index: 1; margin: 12px; background: var(--blanc); color: var(--terre);
  padding: 6px 10px; font: 500 .875rem/1.3 var(--text); max-width: 36ch;
}
.ph__cap b { font-weight: 700; }

/* Avant / après avec photos */
.ba__frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__tag {
  position: absolute; top: 12px; z-index: 1; pointer-events: none;
  background: var(--blanc); font: 700 .6875rem/1 var(--text); letter-spacing: .12em; text-transform: uppercase; padding: 6px 8px;
}
.ba__tag--l { left: 12px; } .ba__tag--r { right: 12px; }
.ba__handle::after { content: "⟷"; font-size: 1rem; letter-spacing: 0; padding: 10px 12px; }

/* Chantier vedette : avant/après portrait + récit */
.ba-lead { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s8); align-items: center; padding: var(--s8) 0; border-bottom: var(--trait); }
.ba-lead .ba { margin: 0; }
.ba-lead .ba__frame { aspect-ratio: 3 / 4; }
.ba-lead h2 { font-size: clamp(1.75rem, 3.2vw, 2.75rem); margin: var(--s2) 0 var(--s3); }
.ba-lead__strip { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin-top: var(--s4); }
.ba-lead__strip .ph { min-height: 220px; }
@media (max-width: 900px) {
  .ba-lead { grid-template-columns: 1fr; gap: var(--s4); padding-top: var(--s4); }
  .ba-lead__strip .ph { min-height: 160px; }
}

.ba-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6) var(--s3); padding: var(--s8) 0; border-bottom: var(--trait); align-items: start; }
.ba-row h2 { grid-column: 1 / -1; font-size: clamp(1.5rem, 2.6vw, 2.25rem); }
.ba-row .ba { margin: 0; }
.ba-row .ba__frame { aspect-ratio: 4 / 3; }
.ba-row .ba--tall .ba__frame { aspect-ratio: 3 / 4; }
@media (max-width: 900px) { .ba-row { grid-template-columns: 1fr; } .ba-row .ba--tall .ba__frame { aspect-ratio: 4 / 5; } }

/* ---------- Conversion ---------- */
.top__cta {
  font: 700 1rem/1 var(--text); text-transform: uppercase; letter-spacing: .06em; text-decoration: none;
  background: var(--terre); color: var(--ciel); border: var(--trait); padding: 12px var(--s3);
}
.top__cta:hover { background: var(--brique); border-color: var(--brique); color: #fff; }
@media (max-width: 820px) { .top__cta { display: none; } }

.stars { color: #e7a614; letter-spacing: 1px; }
.trust { list-style: none; margin: var(--s4) 0 0; padding: var(--s2) 0 0; border-top: 1px solid rgba(46,26,11,.35);
  display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); font-size: 1rem; font-weight: 500; }
.trust li + li::before { content: "·"; margin-right: var(--s3); color: var(--argile); }
.trust a { text-decoration: none; }
.trust a:hover { text-decoration: underline; }
.trust .stars { color: var(--terre); }
@media (max-width: 820px) { .trust { flex-direction: column; gap: 6px; } .trust li + li::before { content: none; } }

.section--tight { padding-top: var(--s8); }

/* Avis */
.avis { background: var(--terre); color: var(--sable); padding: var(--s8) 0 var(--s12); }
.avis__grid { display: grid; grid-template-columns: 4fr 8fr; gap: var(--s6); align-items: start; }
.avis h2 { font-size: clamp(1.875rem, 3.4vw, 2.75rem); color: var(--ciel); margin-bottom: var(--s3); }
.avis__img { min-height: 420px; margin-top: var(--s3); }
@media (max-width: 960px) { .avis__grid { grid-template-columns: 1fr; } .avis__img { min-height: 360px; } }

/* Module type « widget Google » : volontairement proche des widgets du marché */
.gr { background: #fff; color: #202124; border-radius: 8px; padding: var(--s3); font-family: Roboto, Arial, sans-serif; }
.gr__head { display: flex; align-items: center; gap: var(--s2); padding-bottom: var(--s2); border-bottom: 1px solid #e8eaed; flex-wrap: wrap; }
.gr__g { width: 36px; height: 36px; }
.gr__score { font-size: 1.5rem; font-weight: 700; line-height: 1; }
.gr__score .stars { font-size: 1.125rem; margin-left: 4px; }
.gr__count { font-size: .875rem; color: #5f6368; margin-top: 4px; }
.gr__write { margin-left: auto; background: #1a73e8; color: #fff; text-decoration: none; font-size: .875rem; font-weight: 500; padding: 10px 16px; border-radius: 4px; }
.gr__write:hover { background: #1557b0; }
.gr__list { list-style: none; margin: var(--s2) 0 0; padding: 0 0 4px; display: grid; grid-auto-flow: column; grid-auto-columns: calc(50% - 8px); gap: var(--s2);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gr__list::-webkit-scrollbar { display: none; }
.gr__card { scroll-snap-align: start; border: 1px solid #e8eaed; border-radius: 8px; padding: var(--s2); font-size: .9375rem; line-height: 1.5; }
.gr__who { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.gr__who strong { display: block; font-size: .9375rem; }
.gr__who small { color: #5f6368; font-size: .8125rem; }
.gr__av { width: 36px; height: 36px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; }
.gr__card .stars { font-size: .9375rem; margin-bottom: 6px; }
.gr__card p { margin: 0; max-width: none; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.gr__card.is-open p { -webkit-line-clamp: unset; }
.gr__more { background: none; border: 0; padding: 4px 0 0; color: #1a73e8; font: inherit; font-size: .875rem; cursor: pointer; }
.gr__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); padding-top: var(--s2); font-size: .875rem; flex-wrap: wrap; }
.gr__foot a { color: #1a73e8; text-decoration: none; }
.gr__foot a:hover { text-decoration: underline; }
.gr__nav { display: flex; gap: 8px; }
.gr__btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid #dadce0; background: #fff; cursor: pointer; font-size: 1rem; color: #202124; }
.gr__btn:hover { background: #f1f3f4; }
@media (max-width: 640px) { .gr { padding: var(--s2); } .gr__list { grid-auto-columns: 88%; } .gr__write { margin-left: 0; } }

/* Exemple de chantier sur l'accueil */
.ba-lead--home { padding-top: 0; border-bottom: 0; }

/* Formulaire court */
.quote { background: var(--terre); color: var(--sable); padding: var(--s8) 0 var(--s12); }
.quote__grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s8); align-items: start; }
.quote h2 { font-size: clamp(2rem, 4vw, 3.25rem); color: var(--ciel); margin-bottom: var(--s3); }
.quote__or { margin: var(--s4) 0 var(--s1); color: var(--ciel-pale); }
.quote .form { color: var(--terre); }
.field select { width: 100%; font: 400 1.0625rem/1.4 var(--text); color: var(--terre); background: var(--sable); border: 0; border-bottom: 2px solid var(--terre); padding: 12px 10px; }
.opt { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--argile); }
@media (max-width: 960px) { .quote__grid { grid-template-columns: 1fr; gap: var(--s4); } }
.foot > .wrap.foot__base:first-child { border-top: 0; }

.svc__cta { margin-top: var(--s4); }
.contact__rating { margin: var(--s3) 0 0; font-weight: 500; }
.contact__rating a { text-decoration: none; }
.contact__rating a:hover { text-decoration: underline; }

.avis__grid > *, .quote__grid > *, .ba-lead > * { min-width: 0; }
.svc-layout > * { min-width: 0; }

/* Hero : illustration de la carte de visite */
.hero { background: #f1c655 url("../photos/web/hero.jpg") left bottom / auto 100% no-repeat; }
.hero__grid { grid-template-columns: 1fr 1fr; min-height: min(80vh, 760px); align-items: center; padding-top: var(--s6); padding-bottom: clamp(120px, 16vw, 220px); }
.hero__txt { grid-column: 2; padding-bottom: 0; }
.ground { background: #3a220a; }
@media (max-width: 1100px) { .hero { background-size: 100% auto; } .hero__grid { padding-bottom: 56vw; } .hero__txt { grid-column: 1 / -1; } }
@media (max-width: 820px) { .hero__grid { grid-template-columns: 1fr; padding-top: var(--s4); } }
@media (min-width: 1101px) { .hero { background-size: 100% auto; } .hero__grid { min-height: 0; height: 820px; align-items: start; padding-top: 56px; padding-bottom: 0; } }
.trust--ground { margin: 0; padding: var(--s3) 0 0; border-top: 0; color: var(--ciel-pale); }
.trust--ground .stars { color: var(--ciel); }
.trust--ground li + li::before { color: var(--argile); }

.legal { padding-top: var(--s6); padding-bottom: var(--s12); max-width: 780px; }
.legal h2 { font-size: 1.375rem; margin: var(--s6) 0 var(--s2); }
.legal h2:first-child { margin-top: 0; }
.form__err { padding: var(--s3); background: #f6dcd3; border-top: var(--trait); }
.form__err a { font-weight: 700; }
.form .hint { margin: 0 0 var(--s2); }