/* Le Mans Sarthe Rénovation, site B "Derrière le placo". Tokens de design.md, direction b. */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("fonts/atkinson-next-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

@property --cut {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

:root {
  --platre: #ECEBE7;
  --placo: #CFC7BD;
  --bleu: #00009E;
  --orange: #F36607;
  --ardoise: #2A2E36;
  --feutre: #8592A5;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --r-0: 0; --r-1: 4px;

  /* direction b : titres Archivo wdth 112, 700, 36 px au téléphone, 72 px à 1440 */
  --t-display: clamp(2.25rem, 1.414rem + 3.429vw, 4.5rem);
  --t-h2: clamp(2rem, 1.536rem + 1.905vw, 3.25rem);
  --t-h3: clamp(1.375rem, 1.236rem + .571vw, 1.75rem);
  --t-chiffre: clamp(4rem, 2.7rem + 5.333vw, 7.5rem);
  --t-lead: clamp(1.1875rem, 1.118rem + .286vw, 1.375rem);
  --t-body: clamp(1.0625rem, 1.039rem + .095vw, 1.125rem);
  --t-small: clamp(.875rem, .851rem + .095vw, .9375rem);

  --f-titre: "Archivo", "Arial Narrow", sans-serif;
  --f-texte: "Atkinson Hyperlegible Next", "Verdana", sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --gut: clamp(1rem, 4.571vw - .114rem, 4rem);
  --band: clamp(4.6rem, 2.9rem + 7vw, 9.2rem); /* 64 et 128 px, plus 15 % à la finition */
  --bar: 56px;
  --ombre-carte: 0 10px 24px rgba(42, 46, 54, .14);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--bar); }
body {
  margin: 0;
  padding-top: var(--bar);
  background: var(--platre);
  color: var(--ardoise);
  font: 400 var(--t-body)/1.55 var(--f-texte);
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 {
  margin: 0;
  font-family: var(--f-titre);
  font-stretch: 112%;
  font-weight: 700;
  color: var(--bleu);
  text-wrap: balance;
}
h1 { font-size: var(--t-display); line-height: 1.0; letter-spacing: -.01em; }
h2 { font-size: var(--t-h2); line-height: 1.05; letter-spacing: -.005em; }
h3 { font-size: var(--t-h3); line-height: 1.15; }
p { margin: 0; }
.wrap { width: 100%; max-width: calc(1200px + 2 * var(--gut)); margin-inline: auto; padding-inline: var(--gut); }
.measure { max-width: 38rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* surfaces */
.on-bleu { background: var(--bleu); color: var(--platre); }
.on-bleu h1, .on-bleu h2, .on-bleu h3 { color: var(--platre); }
.on-placo { background: var(--placo); position: relative; isolation: isolate; }
.on-placo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("img/texture-placo.jpg") center / cover;
  mix-blend-mode: multiply; opacity: .35;
}
.on-platre { background: var(--platre); }
.band { padding-block: var(--band); }

/* focus */
:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }
.on-bleu :focus-visible, .bar :focus-visible { outline-color: var(--platre); }

/* étiquettes de couche : Atkinson 600, +0,04 em, bas-de-casse, filet feutre */
.tag {
  display: flex; align-items: center; gap: var(--s-3);
  font: 600 var(--t-small)/1.4 var(--f-texte);
  letter-spacing: .04em; text-transform: lowercase;
  color: var(--ardoise);
}
.tag::before { content: ""; flex: none; width: 32px; height: 1px; background: var(--feutre); }
.on-bleu .tag { color: var(--feutre); font-size: .9375rem; }

.lead { font-size: var(--t-lead); line-height: 1.45; }

/* boutons et liens */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--s-5);
  border: 0; border-radius: var(--r-1);
  background: var(--orange); color: var(--bleu);
  font: 700 1.0625rem/1 var(--f-titre); font-stretch: 112%;
  text-decoration: none; cursor: pointer;
  transition: background-color .2s ease-out, color .2s ease-out, box-shadow .2s ease-out;
}
.btn:active { transform: translateY(1px); }
.link {
  color: var(--bleu); text-decoration: none; font-weight: 600;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
  padding-bottom: 2px;
  transition: background-size .3s ease-out;
}
.on-bleu .link { color: var(--platre); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--bleu); color: var(--platre); }
  .on-bleu .btn:hover, .bar .btn:hover { box-shadow: inset 0 0 0 2px var(--platre); }
  .link:hover { background-size: 100% 2px; }
}

/* ---------- la barre ---------- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--bar);
  display: flex; align-items: center; gap: 10px;
  padding-inline: var(--gut);
  background: var(--bleu); color: var(--platre);
}
.bar-logo {
  flex: none; display: flex; align-items: center;
  height: 40px; padding: 0 5px;
  background: var(--platre); border-radius: var(--r-1);
}
.bar-logo img { width: auto; height: 32px; }
.bar-nav { display: none; }
.bar-nav a, .bar-tel {
  font: 600 .9375rem/1 var(--f-texte); color: var(--platre); text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.bar-tel { margin-left: auto; white-space: nowrap; }
.bar .btn { min-height: 40px; padding: 0 var(--s-4); font-size: .9375rem; }
.bar-menu {
  flex: none; height: 40px; padding: 0 var(--s-3);
  border: 1px solid var(--feutre); border-radius: var(--r-1);
  background: transparent; color: var(--platre);
  font: 600 .9375rem/1 var(--f-texte); cursor: pointer;
}
.bar-panel {
  position: fixed; inset: var(--bar) 0 auto 0; z-index: 49;
  display: none; padding: var(--s-5) var(--gut) var(--s-7);
  background: var(--bleu); color: var(--platre);
  border-top: 1px solid var(--feutre);
}
.bar-panel.is-open { display: block; }
.bar-panel ul { list-style: none; margin: 0; padding: 0; }
.bar-panel li { border-bottom: 1px solid color-mix(in srgb, var(--feutre) 50%, transparent); }
.bar-panel a {
  display: block; padding: var(--s-4) 0;
  font: 700 var(--t-h3)/1.15 var(--f-titre); font-stretch: 112%;
  color: var(--platre); text-decoration: none;
}
.bar-panel p { margin-top: var(--s-5); color: var(--feutre); font-weight: 600; font-size: .9375rem; }
@media (min-width: 760px) {
  .bar { gap: var(--s-6); }
  .bar-nav { display: flex; gap: var(--s-6); }
  .bar-menu, .bar-panel { display: none !important; }
}
@media (hover: hover) and (pointer: fine) {
  .bar-nav a, .bar-tel { background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; padding-bottom: 3px; transition: background-size .3s ease-out; }
  .bar-nav a:hover, .bar-tel:hover { background-size: 100% 2px; }
}

/* ---------- le premier écran : le volet derrière le placo ---------- */
.hero { display: grid; background: var(--bleu); color: var(--platre); }
.pair {
  --cut: 0%;
  position: relative; overflow: hidden;
  aspect-ratio: 3 / 4; width: 100%;
  background: var(--placo);
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
  cursor: ew-resize;
  animation: pair-open 1200ms var(--ease) 250ms both;
}
.pair.is-held { animation: none; }
@keyframes pair-open { from { --cut: 0%; } to { --cut: 42%; } }
.pair img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none; -webkit-user-drag: none;
}
.pair-avant { filter: saturate(.9); }
.pair-grain, .grain::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay; opacity: .04; pointer-events: none;
}
.pair-grain { position: absolute; inset: 0; clip-path: inset(0 0 0 calc(100% - var(--cut))); }
.pair-apres { clip-path: inset(0 var(--cut) 0 0); }
.seam {
  position: absolute; top: 0; bottom: 0; z-index: 2;
  left: clamp(8px, calc(100% - var(--cut)), calc(100% - 8px));
  width: 16px; margin-left: -8px;
  background: var(--platre);
  -webkit-mask: url("img/joint-mask-v.png") center / 100% 100% no-repeat;
          mask: url("img/joint-mask-v.png") center / 100% 100% no-repeat;
  outline: none;
}
.seam-grip {
  position: absolute; top: 50%; left: 50%; z-index: 3;
  width: 28px; height: 56px; margin: -28px 0 0 -14px;
  background: var(--platre); border-radius: var(--r-1);
  display: flex; align-items: center; justify-content: center; gap: 5px;
  pointer-events: none;
  left: clamp(14px, calc(100% - var(--cut)), calc(100% - 14px));
}
.seam-grip::before, .seam-grip::after { content: ""; width: 2px; height: 22px; background: var(--feutre); }
.pair:has(.seam:focus-visible) .seam-grip { outline: 2px solid var(--platre); outline-offset: 2px; }

.hero-text {
  padding: var(--s-5) var(--gut) var(--s-8);
  display: flex; flex-direction: column; gap: var(--s-4);
}
.hero-legend { color: var(--feutre); font-weight: 600; font-size: .9375rem; line-height: 1.4; }
.hero-line { font-size: var(--t-lead); line-height: 1.45; max-width: 30rem; }
.hero-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); margin-top: var(--s-2); }
.hero-act .link { font-variant-numeric: tabular-nums; }
.hero-proof { font-weight: 600; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.hero-proof span { color: var(--feutre); }

@media (min-width: 760px) {
  .hero {
    grid-template-columns: min(50vw, calc((100vh - var(--bar)) * .75)) 1fr;
    grid-template-columns: min(50vw, calc((100svh - var(--bar)) * .75)) 1fr;
    align-items: center;
  }
  .hero-text { padding: var(--s-8) var(--gut); gap: var(--s-5); max-width: 44rem; }
  .hero-legend { order: 4; max-width: 26rem; }
}
@media (min-width: 1100px) {
  .hero-text { padding-left: var(--s-9); }
}

/* ---------- la bande à joint posée en travers ---------- */
.couture { position: relative; height: 0; z-index: 5; }
.couture::before {
  content: ""; position: absolute; left: 0; width: 100%; top: -12px; height: 24px;
  background: var(--platre);
  transform: rotate(-.6deg);
  -webkit-mask: url("img/joint-mask.png") center / 100% 100% no-repeat;
          mask: url("img/joint-mask.png") center / 100% 100% no-repeat;
}

/* ---------- les gestes ---------- */
.gestes-head { display: grid; gap: var(--s-5); margin-bottom: var(--s-8); }
.gestes-head .lead { max-width: 34rem; }
.gestes-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-9); }
.geste { display: grid; gap: var(--s-5); }
.geste figure { margin: 0; }
.geste-text { display: grid; gap: var(--s-3); padding-inline: var(--gut); max-width: 36rem; }
.geste-text p:last-child { color: var(--platre); }
.grain { position: relative; }
.grain img { filter: saturate(.9); }
.grain::after { content: ""; position: absolute; inset: 0; }
.ratio-45 img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; }
.ratio-169 img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; }
.ratio-11 img { aspect-ratio: 1 / 1; width: 100%; object-fit: cover; }
@media (min-width: 760px) {
  .gestes-head { grid-template-columns: 1.1fr 1fr; align-items: end; gap: var(--s-8); }
  .gestes-list { gap: var(--s-10); }
  .geste { max-width: calc(1200px + 2 * var(--gut)); margin-inline: auto; width: 100%; padding-inline: var(--gut); align-items: end; column-gap: var(--s-8); }
  .geste-text { padding-inline: 0; }
  .geste-a { grid-template-columns: 5fr 4fr; }
  .geste-b { grid-template-columns: 1fr; }
  .geste-b .geste-text { grid-template-columns: 1fr 1fr; max-width: none; column-gap: var(--s-8); }
  .geste-b .geste-text .tag { grid-column: 1 / -1; }
  .geste-c { grid-template-columns: 4fr 5fr; }
  .geste-c figure { order: 2; }
}

/* ---------- les couches ---------- */
.couches-head { display: grid; gap: var(--s-4); margin-bottom: var(--s-9); }
.chiffre {
  font: 800 var(--t-chiffre)/.9 var(--f-titre); font-stretch: 125%;
  font-variant-numeric: tabular-nums; color: var(--bleu); letter-spacing: -.02em;
}
.chiffre small { font-size: .5em; letter-spacing: 0; }
.couches-head .lead { max-width: 34rem; }
.source { font-size: var(--t-small); font-weight: 600; }
.couches-head h2 { margin-top: var(--s-7); max-width: 18ch; }
.coupe { margin: 0; display: grid; gap: var(--s-6); }
.coupe + .coupe { margin-top: var(--s-10); }
.coupe-img { position: relative; }
.coupe-img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.pin {
  position: absolute; left: var(--x); top: var(--y); z-index: 2;
  width: 26px; height: 26px; margin: -13px 0 0 -13px;
  display: grid; place-items: center;
  background: var(--platre); color: var(--bleu); border-radius: 50%;
  box-shadow: 0 0 0 1px var(--bleu);
  font: 800 .8125rem/1 var(--f-titre); font-variant-numeric: tabular-nums;
}
.legend { list-style: none; margin: var(--s-4) 0 0; padding: 0; counter-reset: c; }
.legend li {
  display: grid; grid-template-columns: 26px 1fr; gap: var(--s-3); align-items: baseline;
  padding: var(--s-3) 0; border-top: 1px solid var(--feutre);
  font-weight: 600; font-size: var(--t-small); letter-spacing: .04em; text-transform: lowercase;
}
.legend li:last-child { border-bottom: 1px solid var(--feutre); }
.legend b { font: 800 .8125rem/1 var(--f-titre); color: var(--bleu); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.r-val { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); margin-top: var(--s-6); }
.r-val strong { white-space: nowrap; }
.r-val strong {
  font: 800 clamp(3rem, 2.4rem + 2.4vw, 4.5rem)/1 var(--f-titre); font-stretch: 125%;
  font-variant-numeric: tabular-nums; color: var(--bleu);
}
.r-val span { font-weight: 600; font-size: var(--t-small); }
.r-note { margin-top: var(--s-3); max-width: 30rem; }
.coupe-mur .legend { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s-5); }
.coupe-mur .legend li:last-child { border-bottom: 0; }
@media (min-width: 760px) {
  .couches-head { grid-template-columns: auto 1fr; column-gap: var(--s-8); align-items: end; }
  .couches-head .chiffre { grid-row: span 2; }
  .couches-head h2 { grid-column: 1 / -1; }
  .coupe-rampant { grid-template-columns: 7fr 4fr; column-gap: var(--s-8); align-items: center; }
  .coupe-mur { grid-template-columns: 1fr; }
  .coupe-mur .coupe-side { display: grid; grid-template-columns: 3fr 2fr; column-gap: var(--s-8); align-items: start; }
  .coupe-mur .legend { grid-template-columns: repeat(4, 1fr); margin-top: 0; }
  .coupe-mur .legend li { grid-template-columns: 1fr; border-bottom: 0; border-top: 0; border-left: 1px solid var(--feutre); padding: 0 var(--s-4); gap: var(--s-2); }
  .coupe-mur .r-val { margin-top: 0; }
}

/* ---------- nos chantiers (accueil) ---------- */
.ch-home { display: grid; gap: var(--s-7); }
.ch-big img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.ch-row { display: grid; gap: var(--s-7); }
.ch-text { display: grid; gap: var(--s-4); align-content: start; }
.ch-text h2 { max-width: 16ch; }
.ch-list { list-style: none; margin: var(--s-3) 0 0; padding: 0; }
.ch-list li { padding: var(--s-3) 0; border-top: 1px solid var(--feutre); }
.ch-list li:last-child { border-bottom: 1px solid var(--feutre); }
.ch-list strong { display: block; font: 700 var(--t-h3)/1.15 var(--f-titre); font-stretch: 112%; color: var(--bleu); }
.carte { display: block; text-decoration: none; color: inherit; overflow: hidden; transition: transform .2s ease-out, box-shadow .2s ease-out; }
.carte img { transition: transform .4s ease-out; }
.ch-side { width: min(100%, 400px); justify-self: end; }
.ch-side img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .carte:hover { transform: translateY(-3px); box-shadow: var(--ombre-carte); }
  .carte:hover img { transform: scale(1.03); }
}
@media (min-width: 760px) {
  .ch-row { grid-template-columns: 1fr 1fr; column-gap: var(--s-8); align-items: start; }
  .ch-side { margin-top: calc(-1 * var(--s-9)); position: relative; z-index: 2; border: 8px solid var(--platre); }
}

/* ---------- les avis ---------- */
.on-soleil { position: relative; isolation: isolate; }
.on-soleil::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("img/soleil-sol.jpg") 70% 100% / cover no-repeat;
  mix-blend-mode: screen; opacity: .16;
}
.avis-quote { margin: 0; }
.avis-quote p {
  font: 700 var(--t-h2)/1.08 var(--f-titre); font-stretch: 112%; color: var(--platre);
  text-wrap: balance; max-width: 17ch;
}
.avis-quote footer { margin-top: var(--s-5); color: var(--feutre); font-weight: 600; font-size: .9375rem; }
.avis-note { display: grid; gap: var(--s-2); margin-top: var(--s-9); padding-top: var(--s-6); border-top: 1px solid var(--feutre); }
.avis-note .chiffre { color: var(--platre); }
.avis-note p { font-weight: 600; }
.avis-note .sub { color: var(--feutre); font-size: .9375rem; }
.avis-more { display: grid; gap: var(--s-7); margin-top: var(--s-9); }
.avis-more blockquote { margin: 0; padding-top: var(--s-4); border-top: 1px solid var(--feutre); }
.avis-more p { font-size: var(--t-lead); line-height: 1.45; }
.avis-more footer { margin-top: var(--s-3); color: var(--feutre); font-weight: 600; font-size: .9375rem; }
.avis-proof { margin-top: var(--s-8); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-weight: 600; }
.avis-proof li { list-style: none; }
.avis-proof { padding: 0; }
@media (min-width: 760px) {
  .avis-grid { display: grid; grid-template-columns: 3fr 2fr; column-gap: var(--s-9); align-items: end; }
  .avis-note { margin-top: 0; }
  .avis-more { grid-template-columns: 1fr 1fr; column-gap: var(--s-8); }
}

/* ---------- le devis ---------- */
.on-feutre { position: relative; isolation: isolate; }
.on-feutre::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("img/texture-feutre.jpg") center / cover;
  mix-blend-mode: multiply; opacity: .10;
}
.devis-grid { display: grid; gap: var(--s-8); }
.devis-grid h2 { max-width: 14ch; }
.devis-grid .lead { margin-top: var(--s-5); max-width: 34rem; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.steps li { display: grid; grid-template-columns: 22px 1fr; gap: var(--s-3); padding: var(--s-5) 0; border-top: 1px solid var(--feutre); }
.steps li:last-child { border-bottom: 1px solid var(--feutre); }
.steps li::before {
  content: ""; width: 10px; height: 10px; margin-top: .55em; background: var(--bleu);
  clip-path: polygon(0.2% 87.6%, 0 55.2%, 39% 0, 100% 56%, 100% 100%);
}
.steps strong { display: block; font: 700 var(--t-h3)/1.15 var(--f-titre); font-stretch: 112%; color: var(--bleu); margin-bottom: var(--s-2); }
.devis-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); margin-top: var(--s-7); }
.devis-act .link { font-variant-numeric: tabular-nums; }
.zone { margin-top: var(--s-5); font-size: var(--t-small); font-weight: 600; max-width: 34rem; }
@media (min-width: 760px) {
  .devis-grid { grid-template-columns: 5fr 6fr; column-gap: var(--s-9); align-items: start; }
}

/* ---------- le pied de page ---------- */
.foot { padding-block: var(--s-9) var(--s-6); }
.foot-grid { display: grid; gap: var(--s-7); }
.foot-brand { display: grid; gap: var(--s-4); align-content: start; }
.foot-brand .bar-logo { width: max-content; height: 56px; padding: 0 8px; }
.foot-brand .bar-logo img { height: 46px; }
.foot-name { font: 700 var(--t-h3)/1.15 var(--f-titre); font-stretch: 112%; }
.foot h3 { font-size: 1rem; font-family: var(--f-texte); font-weight: 600; color: var(--feutre); letter-spacing: .04em; margin-bottom: var(--s-3); }
.foot address { font-style: normal; display: grid; gap: var(--s-2); }
.foot a { text-decoration: none; }
.foot .muted { color: var(--feutre); font-weight: 600; font-size: .9375rem; }
.hours { margin: 0; display: grid; gap: var(--s-1); font-variant-numeric: tabular-nums; }
.hours > div { display: grid; grid-template-columns: 5.5rem 1fr; }
.hours dt { color: var(--feutre); font-weight: 600; }
.hours dd { margin: 0; }
.hours dd span + span::before { content: ", "; }
.hours .off { color: var(--feutre); }
.foot-sign { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid color-mix(in srgb, var(--feutre) 60%, transparent); flex-wrap: wrap; }
.foot-sign img { width: 32px; height: 32px; border-radius: var(--r-1); }
.foot-sign .maison { width: 40px; height: 34px; color: var(--platre); }
.maison path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .maison path { stroke-dashoffset: 1; transition: stroke-dashoffset .7s var(--ease); }
.js .maison.is-in path { stroke-dashoffset: 0; }
.legal { margin-left: auto; display: flex; gap: var(--s-5); font-size: .9375rem; }
.legal a { color: var(--feutre); font-weight: 600; }
@media (min-width: 760px) {
  .foot-grid { grid-template-columns: 1fr 1fr; column-gap: var(--s-7); }
}
@media (min-width: 1100px) {
  .foot-grid { grid-template-columns: 1.1fr 1.2fr 1.5fr .7fr; }
}

/* ---------- page chantiers ---------- */
.page-head { padding-block: var(--band) var(--s-8); }
.page-head h1 { color: var(--bleu); max-width: 16ch; }
.page-head .lead { margin-top: var(--s-5); max-width: 36rem; }
.ch { display: grid; gap: var(--s-6); padding-block: var(--s-8); border-top: 1px solid var(--feutre); }
.ch-meta { display: grid; gap: var(--s-4); align-content: start; }
.ch-meta .tags { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); list-style: none; margin: 0; padding: 0; font-weight: 600; font-size: var(--t-small); letter-spacing: .04em; text-transform: lowercase; }
.ch-meta .tags li { padding-left: var(--s-4); position: relative; }
.ch-meta .tags li::before { content: ""; position: absolute; left: 0; top: .65em; width: 8px; height: 1px; background: var(--feutre); }
.penta { clip-path: polygon(0.2% 87.6%, 0 55.2%, 39% 0, 100% 56%, 100% 100%); }
.ch-combles .ch-photos { display: grid; gap: var(--s-5); }
.ch-combles .penta img { aspect-ratio: 1; width: 100%; object-fit: cover; }
.ch-portrait img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; max-width: 420px; }
.ch-duo { display: grid; gap: var(--s-6); }
.ch-duo figure { margin: 0; }
@media (min-width: 760px) {
  .ch-combles { grid-template-columns: 5fr 6fr; column-gap: var(--s-8); align-items: center; }
  .ch-ite { grid-template-columns: 4fr 5fr; column-gap: var(--s-9); align-items: end; }
  .ch-ite .ch-meta { order: 2; }
  .ch-duo { grid-template-columns: 5fr 4fr; column-gap: var(--s-8); align-items: start; }
  .ch-duo .ch-small { margin-top: var(--s-10); }
}
.services { display: grid; gap: var(--s-7); }
.services ul { list-style: none; margin: 0; padding: 0; }
.services li { padding: var(--s-3) 0; border-top: 1px solid var(--feutre); font-weight: 600; }
.services li:last-child { border-bottom: 1px solid var(--feutre); }
@media (min-width: 760px) {
  .services { grid-template-columns: 1fr 1fr 1fr; column-gap: var(--s-8); }
}

/* ---------- page devis ---------- */
.form { display: grid; gap: var(--s-5); }
.field { display: grid; gap: var(--s-2); }
.field label, .field legend { font-weight: 600; font-size: var(--t-small); letter-spacing: .04em; text-transform: lowercase; }
.field input, .field textarea, .field select {
  width: 100%; min-height: 48px; padding: var(--s-3) var(--s-4);
  border: 1px solid color-mix(in srgb, var(--ardoise) 35%, transparent); border-radius: var(--r-1);
  background: var(--platre); color: var(--ardoise);
  font: 400 var(--t-body)/1.4 var(--f-texte);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border: 2px solid var(--bleu); padding: calc(var(--s-3) - 1px) calc(var(--s-4) - 1px); }
fieldset.field { border: 0; margin: 0; padding: 0; }
.choices { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.choices label { position: relative; text-transform: none; letter-spacing: 0; }
.choices input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choices span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-4);
  border: 1px solid color-mix(in srgb, var(--ardoise) 35%, transparent); border-radius: var(--r-1);
  background: var(--platre); font-weight: 600; cursor: pointer;
  transition: background-color .2s ease-out, color .2s ease-out;
}
.choices input:checked + span { background: var(--bleu); color: var(--platre); border-color: var(--bleu); }
.choices input:focus-visible + span { outline: 2px solid var(--bleu); outline-offset: 2px; }
.err { display: none; padding-left: var(--s-3); border-left: 2px solid var(--bleu); font-size: var(--t-small); }
.field.is-bad .err { display: block; }
.form-note { font-size: var(--t-small); max-width: 34rem; }

/* ---------- apparitions, une fois, à 85 % de l'écran ---------- */
.js .reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .pair { animation: none; --cut: 42%; }
  .js .reveal { transform: none; transition: opacity .2s linear; transition-delay: 0ms; }
  .js .maison path { stroke-dashoffset: 0; transition: none; }
  .btn, .link, .carte, .carte img, .choices span { transition: none; }
  html { scroll-behavior: auto; }
}

/* finition */
.gestes { padding-top: var(--s-7); }
.devis-grid h1 { font-size: var(--t-h2); line-height: 1.05; max-width: 16ch; }

/* la lumière de la fenêtre posée sur le bleu du premier écran */
.hero-text { position: relative; isolation: isolate; align-self: stretch; justify-content: center; }
.hero-text::before {
  content: ""; position: absolute; inset: auto 0 0 0; height: 60%; z-index: -1;
  background: url("img/soleil-sol.jpg") 80% 100% / cover no-repeat;
  mix-blend-mode: screen; opacity: .16;
}

.keep { text-transform: none; }
.js .maison.reveal { opacity: 1; transform: none; }
@media (min-width: 760px) and (max-width: 1099px) {
  .hours { font-size: .9375rem; }
  .hours > div { grid-template-columns: 5rem 1fr; }
}