/* Le Mans Sarthe Rénovation, site A « La fenêtre qui s'ouvre ». Les tokens viennent de design.md. */

@font-face {
  font-family: 'Archivo';
  src: url('assets/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('assets/fonts/atkinson-next-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}

@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }

:root {
  --platre: #ECEBE7;
  --placo: #CFC7BD;
  --bleu: #00009E;
  --orange: #F36607;
  --ardoise: #2A2E36;
  --feutre: #8592A5;
  --ardoise-35: rgba(42, 46, 54, .35);
  --ombre-carte: 0 10px 24px rgba(42, 46, 54, .14);

  --f-titre: 'Archivo', 'Arial Narrow', sans-serif;
  --f-texte: 'Atkinson Hyperlegible Next', 'Segoe UI', sans-serif;

  --t-display: clamp(44px, 27.66px + 4.19vw, 88px);
  --t-h2: clamp(32px, 24.57px + 1.905vw, 52px);
  --t-h3: clamp(22px, 19.77px + .571vw, 28px);
  --t-chiffre: clamp(64px, 43.2px + 5.333vw, 120px);
  --t-lead: clamp(19px, 17.89px + .286vw, 22px);
  --t-body: clamp(17px, 16.63px + .095vw, 18px);
  --t-small: clamp(14px, 13.63px + .095vw, 15px);

  --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;
  --bande: clamp(64px, 40.2px + 6.095vw, 128px);
  --gout: clamp(16px, -1.83px + 4.571vw, 64px);
  --contenu: 1200px;
  /* 68 caractères au plus : Atkinson à 18 px fait 7,6 px le signe, 32rem en tient 67 ; à 15 px, 27rem en tient 67 */
  --mesure: 32rem;
  --mesure-petite: 27rem;

  --r-0: 0;
  --r-1: 4px;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --d-etat: 200ms;
  --d-trait: 700ms;
  --d-apparition: 900ms;
  --d-heros: 1200ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
  margin: 0;
  background: var(--platre);
  color: var(--ardoise);
  font-family: var(--f-texte);
  font-size: var(--t-body);
  line-height: 1.55;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--bleu); }
p { margin: 0; }
h1, h2, h3 {
  margin: 0;
  font-family: var(--f-titre);
  color: var(--bleu);
  text-wrap: balance;
}
h1 { font-size: var(--t-display); font-stretch: 120%; font-weight: 800; line-height: 1; letter-spacing: -.01em; }
h2 { font-size: var(--t-h2); font-stretch: 118%; font-weight: 800; line-height: 1.05; letter-spacing: -.005em; }
h3 { font-size: var(--t-h3); font-stretch: 112%; font-weight: 700; line-height: 1.15; }
.lead { font-size: var(--t-lead); line-height: 1.45; max-width: var(--mesure); }
.texte { max-width: var(--mesure); }
.texte + .texte { margin-top: var(--s-4); }
.etiquette {
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.4;
  color: var(--ardoise);
}
.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }
.sur-bleu :focus-visible { outline-color: var(--platre); }

.enveloppe { width: 100%; max-width: calc(var(--contenu) + 2 * var(--gout)); margin: 0 auto; padding: 0 var(--gout); }
.bande { padding: var(--bande) 0; position: relative; }
.bande--platre { background: var(--platre); }
.bande--placo { background: var(--placo); isolation: isolate; }
.bande--placo::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: url('assets/img/texture-placo.jpg') 0 0 / 1024px auto repeat;
  mix-blend-mode: multiply;
  opacity: .35;
}
.bande--bleu { background: var(--bleu); color: var(--platre); isolation: isolate; overflow: hidden; }
.bande--bleu h2, .bande--bleu h3 { color: var(--platre); }
.bande--bleu .etiquette { color: var(--feutre); }
.bande--bleu::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: url('assets/img/soleil-sol.jpg') var(--soleil, 70% 30%) / var(--soleil-taille, 120% auto) no-repeat;
  mix-blend-mode: screen;
  opacity: .16;
}

/* La bande à joint : le trait d'enduit posé en travers de la couture, deux fois dans la page. */
.joint { position: relative; height: 0; z-index: 3; }
.joint::before {
  content: '';
  position: absolute;
  top: -12px; left: var(--joint-x, 8%);
  width: min(62%, 520px); height: 24px;
  background: var(--platre);
  -webkit-mask: url('assets/img/trait-enduit.png') center / 100% 100% no-repeat;
          mask: url('assets/img/trait-enduit.png') center / 100% 100% no-repeat;
  transform: rotate(-.6deg);
}

/* Les liens texte et les boutons, états de design.md */
.lien {
  color: var(--bleu);
  text-decoration: none;
  font-weight: 600;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
  padding-bottom: 2px;
}
.sur-bleu .lien, .bande--bleu .lien { color: var(--platre); }
.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--s-5);
  background: var(--orange); color: var(--bleu);
  font-family: var(--f-titre); font-stretch: 112%; font-weight: 700; font-size: 17px; line-height: 1;
  border: 0; border-radius: var(--r-1);
  text-decoration: none; cursor: pointer;
  transition: background-color var(--d-etat) ease-out, color var(--d-etat) ease-out, transform var(--d-etat) ease-out;
}
.bouton:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) {
  .lien { transition: background-size 300ms ease-out; }
  .lien:hover { background-size: 100% 2px; }
  .bouton:hover { background: var(--bleu); color: var(--platre); }
  .bande--bleu .bouton:hover { background: var(--platre); color: var(--bleu); }
}

/* ---------- La barre ---------- */
.barre {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  height: 64px;
  background: var(--platre);
  border-bottom: 1px solid rgba(133, 146, 165, .35);
}
.barre .enveloppe { height: 100%; display: flex; align-items: center; gap: var(--s-4); }
.barre__logo { display: flex; align-items: center; gap: var(--s-2); text-decoration: none; margin-right: auto; }
.barre__logo img { width: 40px; height: 40px; object-fit: contain; }
.barre__nom {
  font-family: var(--f-titre); font-stretch: 118%; font-weight: 800; font-size: 15px; line-height: 1.05;
  color: var(--bleu);
}
.barre__tel { font-weight: 600; font-size: var(--t-small); white-space: nowrap; }
.barre .bouton { min-height: 40px; padding: 0 var(--s-4); font-size: 16px; }
.menu { display: flex; gap: var(--s-5); align-items: center; }
.menu a { font-size: var(--t-small); }
.menu__ouvrir {
  display: none;
  min-height: 40px; padding: 0 var(--s-3);
  background: transparent; color: var(--bleu);
  border: 1px solid var(--ardoise-35); border-radius: var(--r-1);
  font: 600 var(--t-small) / 1 var(--f-texte);
  cursor: pointer;
}
@media (max-width: 899px) {
  .barre__nom { display: none; }
  .menu__ouvrir { display: inline-flex; align-items: center; }
  .menu {
    position: fixed; top: 64px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--platre);
    border-bottom: 1px solid rgba(133, 146, 165, .5);
    padding: var(--s-2) var(--gout) var(--s-5);
    display: none;
  }
  .menu.est-ouvert { display: flex; }
  .menu a { font-size: var(--t-lead); padding: var(--s-3) 0; border-bottom: 1px solid rgba(133, 146, 165, .35); background: none; }
}
@media (min-width: 900px) {
  .menu__devis-lien { display: none; }
}
@media (max-width: 359px) {
  .barre__tel .tel-long { display: none; }
}
@media (min-width: 900px) {
  .barre__tel-mobile { display: none; }
}

/* ---------- 1. Le héros : la fenêtre qui s'ouvre ---------- */
.heros { position: relative; height: 200vh; background: var(--platre); --p: 0; }
.heros__scene { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; container-type: size; }
.heros__cadre { position: absolute; inset: 0; container-type: size; }
.heros__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  max-width: none;
}
.heros__contour {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
  opacity: calc(1 - var(--p) * 3.4);
  display: none;
}
.heros__contour path {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  animation: trace 1100ms var(--ease) both;
}
@keyframes trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

.heros__haut, .heros__bas { position: absolute; left: var(--gout); right: var(--gout); z-index: 2; }
.heros__haut h1 { animation: monte 900ms var(--ease) 150ms both; }
@keyframes monte { from { translate: 0 28px; } to { translate: 0 0; } }
.heros__bas { display: grid; gap: var(--s-4); justify-items: start; }
.heros__preuve { font-size: var(--t-small); font-weight: 600; color: var(--ardoise); }
.heros__preuve .etoile { color: var(--bleu); }
.heros__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }

/* Chaque cadrage a sa photo, sa découpe et son contour, relevés dans overlay/fenetre-pentagone.svg.
   s est l'échelle de object-fit: cover, le calcul exact de preserveAspectRatio slice. */
/* Téléphone : hero/combles-triangle-telephone.jpg, 1080x1920, clip-telephone */
.heros__cadre, .heros__haut, .heros__bas {
  --s: max(100cqw / 1080, 100cqh / 1920);
  --cx: 540; --cy: 960;
}
.heros__cadre {
  --x1: 309; --y1: 1098; --x2: 308; --y2: 962; --x3: 489; --y3: 730; --x4: 772; --y4: 965; --x5: 772; --y5: 1150;
}
.heros__contour--tel { display: block; }
.heros__haut { bottom: calc(100cqh - (50cqh + (730 - 960) * var(--s)) + var(--s-5)); }
.heros__bas { top: calc(50cqh + (1150 - 960) * var(--s) + var(--s-6)); }
.heros__haut, .heros__bas { opacity: calc(1 - var(--p) * 6); }

/* Tablette : hero/combles-triangle-3x4.jpg, 1536x2048, clip-3x4 */
@media (min-aspect-ratio: 2/3) and (max-aspect-ratio: 6/5) {
  .heros__cadre, .heros__haut, .heros__bas { --s: max(100cqw / 1536, 100cqh / 2048); --cx: 768; --cy: 1024; }
  .heros__cadre { --x1: 701; --y1: 1171; --x2: 700; --y2: 1026; --x3: 893; --y3: 779; --x4: 1195; --y4: 1030; --x5: 1195; --y5: 1227; }
  .heros__contour--tel { display: none; }
  .heros__contour--3x4 { display: block; }
  .heros__haut { bottom: calc(100cqh - (50cqh + (779 - 1024) * var(--s)) + var(--s-6)); right: auto; max-width: 34rem; }
  .heros__bas { top: calc(50cqh + (1227 - 1024) * var(--s) + var(--s-6)); }
}

/* Écran large : hero/banniere-combles-platre.jpg, 2400x1600, clip-banniere. Le plâtre de la photo s'arrête à x 1080 :
   le texte reste dessus, jamais sur la photo. */
@media (min-aspect-ratio: 6/5) {
  .heros__cadre, .heros__haut, .heros__bas { --s: max(100cqw / 2400, 100cqh / 1600); --cx: 1200; --cy: 800; }
  .heros__cadre { --x1: 1441; --y1: 865; --x2: 1440; --y2: 689; --x3: 1674; --y3: 390; --x4: 2039; --y4: 694; --x5: 2039; --y5: 932; }
  .heros__contour--tel { display: none; }
  .heros__contour--banniere { display: block; }
  .heros__haut, .heros__bas { left: max(var(--gout), 50cqw - var(--contenu) / 2); right: auto; }
  /* le titre au-dessus de la fenêtre, arrêté avant le faîte ; il s'efface quand la fenêtre s'ouvre */
  .heros__haut {
    bottom: auto; top: calc(64px + var(--s-6));
    width: calc(50cqw + (1674 - 1200) * var(--s) - max(var(--gout), 50cqw - var(--contenu) / 2) - var(--s-5));
  }
  /* la phrase, la preuve et le bouton restent sur le plâtre de la photo, qui s'arrête à x 1080 */
  .heros__bas {
    top: calc(64px + var(--s-6) + 3 * var(--t-display) + var(--s-7));
    width: calc(50cqw + (1080 - 1200) * var(--s) - max(var(--gout), 50cqw - var(--contenu) / 2) - var(--s-7));
    opacity: 1;
  }
}

/* La découpe : cinq points de la fenêtre qui vont vers les coins quand --p va de 0 à 1 */
.heros__photo {
  --X1: calc(50cqw + (var(--x1) - var(--cx)) * var(--s)); --Y1: calc(50cqh + (var(--y1) - var(--cy)) * var(--s));
  --X2: calc(50cqw + (var(--x2) - var(--cx)) * var(--s)); --Y2: calc(50cqh + (var(--y2) - var(--cy)) * var(--s));
  --X3: calc(50cqw + (var(--x3) - var(--cx)) * var(--s)); --Y3: calc(50cqh + (var(--y3) - var(--cy)) * var(--s));
  --X4: calc(50cqw + (var(--x4) - var(--cx)) * var(--s)); --Y4: calc(50cqh + (var(--y4) - var(--cy)) * var(--s));
  --X5: calc(50cqw + (var(--x5) - var(--cx)) * var(--s)); --Y5: calc(50cqh + (var(--y5) - var(--cy)) * var(--s));
  clip-path: polygon(
    calc(var(--X1) * (1 - var(--p))) calc(var(--Y1) + (100cqh - var(--Y1)) * var(--p)),
    calc(var(--X2) * (1 - var(--p))) calc(var(--Y2) * (1 - var(--p))),
    calc(var(--X3) + (50cqw - var(--X3)) * var(--p)) calc(var(--Y3) * (1 - var(--p))),
    calc(var(--X4) + (100cqw - var(--X4)) * var(--p)) calc(var(--Y4) * (1 - var(--p))),
    calc(var(--X5) + (100cqw - var(--X5)) * var(--p)) calc(var(--Y5) + (100cqh - var(--Y5)) * var(--p))
  );
}

@keyframes ouvre { from { --p: 0; } to { --p: 1; } }
@supports (animation-timeline: scroll()) {
  .heros {
    animation: ouvre linear both;
    animation-timing-function: var(--ease);
    animation-timeline: scroll(root block);
    animation-range: 0 100vh;
  }
}

/* Le pied du héros : la photo entière finit sur un dégradé vers le plâtre de la section suivante */
.heros__pied {
  position: absolute; left: 0; right: 0; bottom: 0; height: 18svh;
  background: linear-gradient(to bottom, rgba(236, 235, 231, 0), var(--platre));
  opacity: var(--p);
  pointer-events: none;
}

/* ---------- 2. La pièce finie ---------- */
.piece { display: grid; gap: var(--s-7); align-items: center; }
.piece__cadre { width: min(100%, 520px); }
.piece__cadre img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  clip-path: polygon(0.2% 87.6%, 0% 55.2%, 39% 0%, 100% 56%, 100% 100%);
}
.piece__texte { display: grid; gap: var(--s-5); }
.piece__couches { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); padding: 0; margin: 0; list-style: none; }
.piece__couches li { font-weight: 600; font-size: var(--t-small); letter-spacing: .04em; border-top: 2px solid var(--feutre); padding-top: var(--s-2); }
@media (min-width: 900px) {
  .piece { grid-template-columns: 5fr 6fr; gap: var(--s-9); }
}

/* ---------- 3. Le chiffre ---------- */
.chiffre { display: grid; gap: var(--s-7); align-items: center; }
.chiffre__nombre {
  font-family: var(--f-titre); font-stretch: 125%; font-weight: 800;
  font-size: var(--t-chiffre); line-height: .9;
  font-variant-numeric: tabular-nums;
  color: var(--platre);
  display: inline-block; position: relative;
  padding-bottom: var(--s-4);
  white-space: nowrap;
}
.chiffre__trait {
  display: block;
  position: absolute; left: -2%; bottom: -10px;
  width: 104%; height: .2em;
  background: var(--orange);
  -webkit-mask: url('assets/img/trait-enduit.png') left center / 100% 100% no-repeat;
          mask: url('assets/img/trait-enduit.png') left center / 100% 100% no-repeat;
}
.js .chiffre__trait { -webkit-mask-size: 0% 100%; mask-size: 0% 100%; transition: -webkit-mask-size var(--d-trait) var(--ease), mask-size var(--d-trait) var(--ease); }
.js .chiffre.is-in .chiffre__trait { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.chiffre__phrase { font-family: var(--f-titre); font-stretch: 112%; font-weight: 700; font-size: var(--t-h3); line-height: 1.15; max-width: 22ch; margin-top: var(--s-6); }
.chiffre__source { margin-top: var(--s-4); }
.chiffre__suite { margin-top: var(--s-5); max-width: var(--mesure); }
@media (min-width: 900px) {
  .chiffre { grid-template-columns: 6fr 5fr; gap: var(--s-9); }
}

/* Les illustrations générées : grain de 4 %, saturation 90 %, toujours dites « Illustration » */
.illu { margin: 0; display: grid; gap: var(--s-2); }
.illu__image { position: relative; overflow: hidden; }
.illu__image img { filter: saturate(.9); width: 100%; }
.illu__image::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' 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;
}
.illu .etiquette { color: var(--feutre); }
.bande--platre .illu .etiquette, .bande--placo .illu .etiquette { color: var(--ardoise); opacity: .8; }

/* ---------- 4. Derrière le placo : le volet ---------- */
.volet-grille { display: grid; gap: var(--s-7); }
.volet-intro { display: grid; gap: var(--s-4); }
.volet {
  --v: 100%;
  position: relative;
  width: 100%; max-width: 560px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
}
.volet img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.volet__apres { clip-path: inset(0 calc(100% - var(--v)) 0 0); }
.volet__poignee {
  position: absolute; top: 0; bottom: 0;
  left: calc(var(--v) - 8px);
  width: 16px;
  background: var(--platre);
  border: 0; padding: 0; margin: 0;
  cursor: ew-resize;
  color: var(--bleu);
  box-shadow: 0 0 0 1px rgba(42, 46, 54, .12);
}
.volet__poignee::before {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 2px; height: 40px; translate: -50% -50%;
  background: var(--feutre);
}
.volet__bascule { display: none; }
.couches { list-style: none; padding: 0; margin: 0; counter-reset: c; display: grid; gap: 0; max-width: var(--mesure); }
.couches li {
  counter-increment: c;
  display: grid; grid-template-columns: 2.2em 1fr; gap: var(--s-3);
  padding: var(--s-3) 0;
  border-top: 1px solid rgba(42, 46, 54, .22);
}
.couches li::before {
  content: counter(c);
  font-family: var(--f-titre); font-stretch: 118%; font-weight: 800; color: var(--bleu);
  font-variant-numeric: tabular-nums;
}
.couches strong { font-weight: 600; }
.volet-cote { display: grid; gap: var(--s-7); align-content: start; }
.volet-cote .illu { max-width: 480px; }
@media (min-width: 900px) {
  .volet-grille { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: var(--s-9); align-items: start; }
  .volet-intro { grid-column: 1 / -1; grid-template-columns: 6fr 5fr; gap: var(--s-9); align-items: end; }
}

/* ---------- 5. La façade ---------- */
.facade { display: grid; gap: var(--s-7); }
.facade__photo img { width: 100%; max-width: 420px; aspect-ratio: 3 / 4; object-fit: cover; }
.facade__texte { display: grid; gap: var(--s-5); align-content: center; }
.facade__lieu { font-weight: 600; }
.facade__illus { display: grid; gap: var(--s-6); grid-template-columns: 1fr; }
.facade__illus .illu p { max-width: 30rem; }
@media (min-width: 700px) {
  .facade__illus { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .facade { grid-template-columns: 7fr 5fr; gap: var(--s-9); }
  .facade__photo { justify-self: end; }
  .facade__illus { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; align-items: start; gap: var(--s-7); }
}

/* ---------- 6. Les aides ---------- */
.aides__tete { display: grid; gap: var(--s-4); max-width: 44rem; }
.aides__liste { list-style: none; padding: 0; margin: var(--s-8) 0 0; display: grid; }
.aides__liste li {
  display: grid; gap: var(--s-2) var(--s-7);
  padding: var(--s-5) 0;
  border-top: 1px solid rgba(133, 146, 165, .55);
}
.aides__liste li:last-child { border-bottom: 1px solid rgba(133, 146, 165, .55); }
.aides__valeur {
  font-family: var(--f-titre); font-stretch: 118%; font-weight: 800;
  font-size: var(--t-h2); line-height: 1.05; font-variant-numeric: tabular-nums;
  color: var(--platre);
}
.aides__quoi { font-family: var(--f-titre); font-stretch: 112%; font-weight: 700; font-size: var(--t-h3); line-height: 1.15; }
.aides__detail { color: var(--platre); opacity: .92; max-width: var(--mesure); }
.aides__rge { margin-top: var(--s-7); display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); align-items: center; }
.aides__rge p { max-width: var(--mesure); font-weight: 600; }
.aides__liste li > span:first-child { display: block; }
@media (min-width: 900px) {
  .aides__liste li { grid-template-columns: 7fr 5fr; grid-template-rows: auto auto; align-items: end; column-gap: var(--s-9); }
  .aides__valeur { grid-row: 1; }
  .aides__quoi { grid-row: 2; }
  .aides__detail { grid-column: 2; grid-row: 1 / 3; align-self: end; }
}

/* ---------- 7. Les avis ---------- */
.avis { display: grid; gap: var(--s-8); }
.avis__citation { margin: 0; display: grid; gap: var(--s-5); max-width: 52rem; }
.avis__citation blockquote { margin: 0; }
.avis__citation blockquote p {
  font-family: var(--f-titre); font-stretch: 118%; font-weight: 800;
  font-size: var(--t-h2); line-height: 1.08; color: var(--bleu);
  text-wrap: balance;
}
.avis__note { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); font-weight: 600; }
.avis__note .num { font-family: var(--f-titre); font-stretch: 118%; font-weight: 800; color: var(--bleu); font-size: var(--t-h3); }
.avis__grille { display: grid; gap: var(--s-7); }
.avis__liste { display: grid; gap: var(--s-6); }
.avis__un { display: grid; gap: var(--s-3); padding-top: var(--s-5); border-top: 1px solid rgba(42, 46, 54, .22); max-width: var(--mesure); }
.avis__un p:first-child { font-size: var(--t-lead); line-height: 1.45; }
.avis__qui { font-size: var(--t-small); font-weight: 600; }
.avis__qui, .avis__reponse, .chiffre__source { max-width: var(--mesure-petite); }
.avis__reponse { font-size: var(--t-small); padding-left: var(--s-4); border-left: 2px solid var(--feutre); }
@media (min-width: 900px) {
  .avis__grille { grid-template-columns: 6fr 5fr; gap: var(--s-9); align-items: start; }
}

/* ---------- 8. Le devis ---------- */
.devis { display: grid; gap: var(--s-7); }
.devis__tete { display: grid; gap: var(--s-4); }
.plaque {
  position: relative; isolation: isolate;
  background: var(--platre);
  padding: var(--s-6) var(--s-5);
  border-radius: var(--r-0);
}
.plaque::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: url('assets/img/texture-feutre.jpg') center / cover;
  mix-blend-mode: multiply;
  opacity: .1;
}
.choix { list-style: none; padding: 0; margin: 0; display: grid; }
.choix a, .choix label {
  display: grid; grid-template-columns: 10px 1fr; gap: var(--s-1) var(--s-4); align-items: center;
  padding: var(--s-4) 0;
  border-bottom: 1px solid rgba(42, 46, 54, .22);
  text-decoration: none; color: var(--bleu);
  font-family: var(--f-titre); font-stretch: 112%; font-weight: 700; font-size: var(--t-h3); line-height: 1.15;
}
.choix li:first-child a, .choix li:first-child label { border-top: 1px solid rgba(42, 46, 54, .22); }
.choix small { grid-column: 2; font-family: var(--f-texte); font-stretch: 100%; font-weight: 600; font-size: var(--t-small); color: var(--ardoise); }
.puce {
  width: 10px; height: 10px;
  background: var(--bleu);
  clip-path: polygon(0.2% 87.6%, 0% 55.2%, 39% 0%, 100% 56%, 100% 100%);
}
.choix a { transition: color var(--d-etat) ease-out; }
@media (hover: hover) and (pointer: fine) {
  .choix a:hover { color: var(--ardoise); }
}
.devis__gauche { display: grid; gap: var(--s-7); align-content: start; }
.devis__action { display: grid; gap: var(--s-5); justify-items: start; }
.coord { display: grid; gap: var(--s-5); }
.coord dl { margin: 0; display: grid; gap: var(--s-4); }
.coord dt { font-size: var(--t-small); font-weight: 600; letter-spacing: .04em; color: var(--ardoise); opacity: .75; }
.coord dd { margin: 0; }
.coord .tel-grand {
  font-family: var(--f-titre); font-stretch: 118%; font-weight: 800; font-size: var(--t-h3);
  color: var(--bleu); text-decoration: none; font-variant-numeric: tabular-nums;
}
.horaires { display: grid; gap: 2px; font-variant-numeric: tabular-nums; font-size: var(--t-small); }
.horaires > div { display: grid; grid-template-columns: 6.5em 1fr; }
.horaires [data-content] span { white-space: nowrap; }
.horaires [data-content] span + span::before { content: ' · '; }
.ligne-du-jour { font-weight: 600; padding-left: var(--s-4); border-left: 2px solid var(--bleu); max-width: var(--mesure); }
@media (min-width: 900px) {
  .devis { grid-template-columns: 7fr 5fr; gap: var(--s-9); align-items: start; }
  .devis__tete { grid-column: 1 / -1; grid-template-columns: 7fr 5fr; gap: var(--s-9); align-items: end; }
  .plaque { padding: var(--s-7); }
}

/* ---------- Le pied de page ---------- */
.pied { background: var(--platre); padding: var(--s-8) 0 var(--s-6); border-top: 1px solid rgba(133, 146, 165, .35); }
.pied__grille { display: grid; gap: var(--s-6); }
.pied__marque { display: flex; align-items: flex-end; gap: var(--s-4); }
.pied__maison { width: 72px; height: auto; }
.pied__maison path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .pied__maison path { stroke-dashoffset: 1; transition: stroke-dashoffset var(--d-trait) var(--ease); }
.js .pied.is-in .pied__maison path { stroke-dashoffset: 0; }
.pied__by { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-small); font-weight: 600; }
.pied__by img { width: 32px; height: 32px; }
.pied__liens { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: var(--t-small); }
.pied__legal { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: var(--t-small); padding-top: var(--s-5); border-top: 1px solid rgba(133, 146, 165, .35); }
.pied__legal a { color: var(--ardoise); }
@media (min-width: 900px) {
  .pied__grille { grid-template-columns: 5fr 4fr 3fr; align-items: end; }
}

/* ---------- Les apparitions ---------- */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--d-apparition) var(--ease), transform var(--d-apparition) var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- La page devis ---------- */
.page-devis { padding-top: calc(64px + var(--s-8)); }
.formulaire { display: grid; gap: var(--s-5); }
.champ { display: grid; gap: var(--s-2); }
.champ label, .champ legend { font-size: var(--t-small); font-weight: 600; letter-spacing: .04em; }
.champ input, .champ textarea, .champ select {
  font: 400 var(--t-body) / 1.4 var(--f-texte);
  color: var(--ardoise);
  background: var(--platre);
  border: 1px solid var(--ardoise-35);
  border-radius: var(--r-1);
  padding: 11px var(--s-3);
  min-height: 48px;
  width: 100%;
  transition: border-color var(--d-etat) ease-out, box-shadow var(--d-etat) ease-out;
}
.champ textarea { min-height: 120px; resize: vertical; }
.champ input:focus, .champ textarea:focus { outline: none; border-color: var(--bleu); box-shadow: inset 0 0 0 1px var(--bleu); }
.champ__erreur { display: none; font-size: var(--t-small); padding-left: var(--s-3); border-left: 2px solid var(--orange); }
.champ.a-erreur .champ__erreur { display: block; }
fieldset.champ { border: 0; padding: 0; margin: 0; }
.choix input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choix label { cursor: pointer; }
.choix label .coche { width: 22px; height: 22px; border: 1px solid var(--ardoise-35); border-radius: 50%; display: grid; place-items: center; }
.choix input:checked + label .coche::after { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--bleu); }
.choix input:focus-visible + label { outline: 2px solid var(--bleu); outline-offset: 2px; }
.deux { display: grid; gap: var(--s-5); }
@media (min-width: 700px) { .deux { grid-template-columns: 1fr 1fr; } }
.merci { display: none; font-weight: 600; padding-left: var(--s-4); border-left: 2px solid var(--bleu); }
.formulaire.est-envoye .merci { display: block; }

/* Le devis en quelques champs : la case à cocher prend la puce du logo, les photos se déposent, la demande reçue se relit */
.formulaire .choix li { position: relative; }
.formulaire .choix label { grid-template-columns: 22px 1fr; }
.choix label .coche.coche--case { border-radius: var(--r-1); }
.choix input:checked + label .coche--case::after {
  border-radius: 0;
  clip-path: polygon(0.2% 87.6%, 0% 55.2%, 39% 0%, 100% 56%, 100% 100%);
}
.champ select:focus { outline: none; border-color: var(--bleu); box-shadow: inset 0 0 0 1px var(--bleu); }
.depot {
  position: relative;
  display: grid; gap: var(--s-3);
  padding: var(--s-5);
  background: var(--platre);
  border: 1px dashed var(--ardoise-35); border-radius: var(--r-1);
  transition: border-color var(--d-etat) ease-out, box-shadow var(--d-etat) ease-out;
}
.depot.est-survole { border-color: var(--bleu); box-shadow: inset 0 0 0 1px var(--bleu); }
.depot:focus-within { outline: 2px solid var(--bleu); outline-offset: 2px; }
.champ .depot input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; opacity: 0; cursor: pointer; }
.depot__vignettes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.depot__vignettes:empty, .depot__compte:empty { display: none; }
.depot__vignettes img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-1); }
.recap { display: none; }
.formulaire.est-envoye > :not(.merci):not(.recap) { display: none; }
.formulaire.est-envoye .recap { display: grid; }
.recap__titre { font-size: var(--t-h3); font-stretch: 112%; }
.recap__aides { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: var(--s-3); max-width: var(--mesure); }
.recap__aides li { display: grid; grid-template-columns: 10px 1fr; gap: var(--s-3); align-items: baseline; }
.recap__modifier { justify-self: start; border: 0; padding: 0 0 2px; background-color: transparent; font: 600 var(--t-body) / 1.4 var(--f-texte); cursor: pointer; }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  .heros { height: auto; animation: none; --p: 0; }
  .heros__scene { position: relative; height: auto; overflow: visible; container-type: normal; padding-top: calc(64px + var(--s-6)); display: grid; }
  .heros__haut, .heros__bas { position: static; opacity: 1; width: auto; padding: 0 var(--gout); max-width: none; }
  .heros__haut { order: 1; }
  .heros__bas { order: 2; margin-top: var(--s-5); }
  .heros__cadre { order: 3; position: relative; height: 72svh; margin-top: var(--s-7); }
  .heros__photo { clip-path: none; }
  .heros__contour { opacity: 1; }
  .heros__contour path, .heros__haut h1 { animation: none; }
  .heros__pied { display: none; }
  .js .reveal { transform: none; transition: opacity 200ms ease-out; transition-delay: 0ms; }
  .js .chiffre__trait { transition: none; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
  .js .pied__maison path { transition: none; stroke-dashoffset: 0; }
  .volet__poignee { display: none; }
  .volet__bascule { display: inline-flex; margin-top: var(--s-4); }
  .volet.montre-avant .volet__apres { clip-path: inset(0 100% 0 0); }
  .lien, .bouton, .choix a { transition: none; }
}