/* Variante conservant la plaquette validée et isolant les demandes du 20 août 2026. */

.variant-cover .cover-title { margin-top: 72px; }
.variant-cover .cover-title h1 { margin-top: 0; }

/* Page 3 — même fond clair que les autres pages et couleurs inversées. */
.sheet--copro-inverted { color: var(--ink); }
.sheet--copro-inverted .page-heading--copro h2 { color: var(--green-deep); }
.sheet--copro-inverted .context-narrative {
  border-color: rgba(6, 120, 96, .3);
}
.sheet--copro-inverted .context-narrative article {
  border-color: rgba(6, 120, 96, .22);
}
.sheet--copro-inverted .context-narrative h3 { color: var(--green-deep); }
.sheet--copro-inverted .context-narrative p { color: #4c5a56; }
.sheet--copro-inverted .context-narrative strong { color: var(--blue-deep); }
.sheet--copro-inverted .project-path {
  border-color: rgba(6, 120, 96, .3);
  background: rgba(255, 255, 255, .64);
}
.sheet--copro-inverted .project-path > header h3 { color: var(--green-deep); }
.sheet--copro-inverted .project-path > header div > p { color: var(--muted); }
.sheet--copro-inverted .renovation-timeline::before { background: rgba(6, 120, 96, .31); }
.sheet--copro-inverted .timeline-decision {
  color: var(--white);
  background: var(--green-deep);
}
.sheet--copro-inverted .timeline-item > p { color: var(--muted); }
.sheet--copro-inverted .timeline-item > p strong { color: var(--green-deep); }
.sheet--copro-inverted .timeline-notes p {
  color: #43536a;
  background: rgba(65, 109, 138, .11);
}
.sheet--copro-inverted .timeline-notes p:last-child {
  color: #36564e;
  background: rgba(6, 120, 96, .11);
}
.sheet--copro-inverted .timeline-notes span { color: var(--blue-deep); }
.sheet--copro-inverted .timeline-notes p:last-child span { color: var(--green-deep); }

/* Pages 4 à 6 — produits présentés en cartes hautes et verticales. */
.sheet--vertical-products {
  padding-bottom: 42px;
  background:
    linear-gradient(140deg, rgba(207, 226, 221, .23), transparent 30%),
    var(--grey-soft);
}

.page-heading--products { margin-top: 22px; }
.page-heading--products h2 {
  max-width: 650px;
  font-size: 39px;
}

.vertical-products {
  display: grid;
  gap: 22px;
  height: 742px;
  margin-top: 31px;
}

.vertical-products--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vertical-products--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.vertical-product {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 34px 25px 26px;
  overflow: hidden;
  border: 1px solid rgba(6, 120, 96, .2);
  border-top: 6px solid var(--green);
  border-radius: 12px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 13px 30px rgba(29, 29, 27, .075);
}

.vertical-product::after {
  position: absolute;
  right: -58px;
  bottom: -68px;
  width: 166px;
  height: 184px;
  content: "";
  background: rgba(6, 120, 96, .06);
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
}

.vertical-product--blue {
  border-color: rgba(65, 109, 138, .21);
  border-top-color: var(--blue);
}
.vertical-product--blue::after { background: rgba(65, 109, 138, .065); }

.product-marker {
  display: grid;
  width: 53px;
  height: 59px;
  place-items: center;
  color: var(--white);
  background: var(--green);
  font-family: var(--display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
}
.vertical-product--blue .product-marker { background: var(--blue); }

.product-eyebrow {
  margin-top: 28px;
  color: var(--green);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.vertical-product--blue .product-eyebrow { color: var(--blue-deep); }

.vertical-product h3 {
  margin-top: 10px;
  color: var(--green-deep);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.08;
}
.vertical-product--blue h3 { color: var(--blue-deep); }

.product-summary {
  margin-top: 18px;
  color: #46544f;
  font-size: 10px;
  line-height: 1.58;
}

.vertical-product ul {
  display: grid;
  gap: 11px;
  margin: 29px 0 0;
  padding: 25px 0 0;
  border-top: 1px solid rgba(6, 120, 96, .2);
  list-style: none;
}
.vertical-product--blue ul { border-color: rgba(65, 109, 138, .22); }

.vertical-product li {
  position: relative;
  padding-left: 17px;
  color: #52605c;
  font-size: 9px;
  line-height: 1.42;
}
.vertical-product li::before {
  position: absolute;
  top: .44em;
  left: 0;
  width: 7px;
  height: 8px;
  content: "";
  background: var(--green);
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
}
.vertical-product--blue li::before { background: var(--blue); }

.product-visual {
  display: grid;
  width: 100%;
  height: 204px;
  place-items: center;
  flex: 0 0 auto;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(6, 120, 96, .18);
  color: var(--green);
}
.vertical-product--blue .product-visual {
  border-color: rgba(65, 109, 138, .2);
  color: var(--blue);
}
.product-visual svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.product-visual .visual-outline {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.product-visual .visual-strong { stroke-width: 3; }
.product-visual .visual-dashed { stroke-dasharray: 5 6; }
.product-visual .visual-fill-soft { fill: rgba(6, 120, 96, .1); }
.vertical-product--blue .product-visual .visual-fill-soft { fill: rgba(65, 109, 138, .1); }
.product-visual text {
  fill: currentColor;
  font-family: var(--body);
  text-anchor: middle;
}
.product-visual .visual-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
}
.product-visual .visual-caption {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .05em;
}
.dpe-bars text {
  fill: var(--white);
  font-family: var(--display);
  font-size: 12px;
  font-weight: 800;
  text-anchor: start;
}
.dpe-reading rect { fill: rgba(6, 120, 96, .08); stroke: var(--green); stroke-width: 2; }
.dpe-reading .dpe-grade {
  fill: var(--green-deep);
  font-family: var(--display);
  font-size: 44px;
  font-weight: 800;
}
.pppt-grid { opacity: .35; }
.pppt-bars rect { fill: currentColor; opacity: .78; }
.audit-points circle { fill: currentColor; }
.audit-lens { fill: rgba(65, 109, 138, .06); stroke: currentColor; stroke-width: 3; }
.feasibility-node circle { fill: rgba(6, 120, 96, .09); stroke: currentColor; stroke-width: 2; }
.feasibility-labels { font-size: 11px; }
.amo-node polygon { fill: rgba(6, 120, 96, .08); stroke: currentColor; stroke-width: 2; }
.amo-labels { font-size: 9px; }
.moe-stamp { fill: rgba(65, 109, 138, .08); stroke: currentColor; stroke-width: 3; }

.product-output {
  position: relative;
  z-index: 1;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(6, 120, 96, .18);
  color: var(--green-deep);
  font-size: 9px;
  font-weight: 600;
  line-height: 1.45;
}
.vertical-product--blue .product-output {
  border-color: rgba(65, 109, 138, .2);
  color: var(--blue-deep);
}
.product-output span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 6px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.vertical-products--three .vertical-product { padding-inline: 21px; }
.vertical-products--three .vertical-product h3 { font-size: 17px; }
.vertical-products--three .product-summary { font-size: 9px; }
.vertical-products--three .vertical-product li { font-size: 8.4px; }
.vertical-products--three .product-visual { height: 148px; padding-top: 13px; }

/* Page 7 — contact, volontairement sans texte commercial. */
.sheet--contact-simple {
  color: var(--grey-light);
  background:
    linear-gradient(135deg, transparent 0 60%, rgba(6, 120, 96, .42) 60% 61%, transparent 61%),
    var(--green-deep);
}

.contact-simple__brand img { width: 304px; }

.contact-simple__content {
  position: absolute;
  z-index: 2;
  right: 52px;
  bottom: 158px;
  left: 52px;
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 42px;
  align-items: end;
  padding-top: 34px;
  border-top: 1px solid rgba(217, 223, 220, .42);
}

.contact-simple__content h2 {
  color: var(--grey-light);
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -.04em;
}

.contact-simple__content address {
  display: grid;
  gap: 10px;
  font-style: normal;
}

.contact-simple__content a,
.contact-simple__content p {
  width: fit-content;
  color: var(--white);
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
}
.contact-simple__content a {
  text-decoration: underline;
  text-decoration-color: rgba(207, 226, 221, .42);
  text-underline-offset: 4px;
}
.contact-simple__content p { color: var(--green-pale); font-size: 12px; }

.contact-simple__mark {
  position: absolute;
  top: 250px;
  right: 92px;
  width: 260px;
  height: 225px;
  overflow: visible;
}
.contact-hex {
  fill: rgba(207, 226, 221, .055);
  stroke: rgba(207, 226, 221, .22);
  stroke-linejoin: round;
  stroke-width: 2;
}
.contact-hex--inner {
  fill: none;
  stroke: rgba(207, 226, 221, .14);
  stroke-width: 1;
}

.contact-simple__footer {
  position: absolute;
  right: 52px;
  bottom: 28px;
  left: 52px;
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid rgba(217, 223, 220, .3);
  color: var(--green-pale);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

@media screen and (max-width: 850px) {
  .vertical-products,
  .vertical-products--three,
  .vertical-products--two {
    height: auto;
    grid-template-columns: 1fr;
  }
  .vertical-product { min-height: 560px; }
  .sheet--contact-simple { min-height: 720px; }
  .contact-simple__content {
    position: absolute;
    right: 20px;
    bottom: 100px;
    left: 20px;
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .contact-simple__brand img { width: min(76vw, 304px); }
  .contact-simple__mark { top: 180px; right: -40px; transform: scale(.75); }
  .contact-simple__footer { right: 20px; bottom: 24px; left: 20px; }
}