/* Offre NAT’Etude — quatre feuilles A4, lisibles à l’écran et prêtes pour l’impression PDF. */

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

:root {
  --green: #067860;
  --green-deep: #045a49;
  --green-pale: #cfe2dd;
  --grey: #a3abaf;
  --grey-soft: #eef1ef;
  --grey-light: #d9dfdc;
  --blue: #416d8a;
  --blue-deep: #31566f;
  --ink: #1d1d1b;
  --muted: #56625f;
  --white: #ffffff;
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --a4-width: 210mm;
  --a4-height: 297mm;
}

html { scroll-behavior: smooth; }

body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background: var(--grey-soft);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, h4, blockquote, figure { margin: 0; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.skip-link {
  position: fixed;
  z-index: 1000;
  top: .75rem;
  left: .75rem;
  padding: .75rem 1rem;
  color: var(--white);
  background: var(--ink);
  transform: translateY(-180%);
}

.skip-link:focus { transform: none; }

.viewer-toolbar {
  position: sticky;
  z-index: 100;
  top: 0;
  display: grid;
  min-height: 72px;
  grid-template-columns: 190px 1fr auto;
  gap: 1.5rem;
  align-items: center;
  padding: .75rem clamp(1rem, 4vw, 3rem);
  border-bottom: 1px solid var(--grey-light);
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(10px);
}

.viewer-toolbar__brand { width: 165px; }

.viewer-toolbar > p {
  justify-self: center;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.viewer-toolbar > div { display: flex; align-items: center; gap: .75rem; }

.viewer-toolbar a {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: .65rem 1rem;
  border: 1px solid var(--grey-light);
  color: var(--green-deep);
  background: var(--white);
  font-size: .8rem;
  font-weight: 600;
}

.viewer-toolbar .download-action { border-color: var(--green); color: var(--white); background: var(--green); }
.viewer-toolbar .download-action:hover { background: var(--green-deep); }

.brochure {
  display: grid;
  width: var(--a4-width);
  gap: 24px;
  margin: 32px auto 64px;
}

.sheet {
  position: relative;
  width: var(--a4-width);
  height: var(--a4-height);
  overflow: hidden;
  padding: 38px 52px 36px;
  background: var(--white);
  box-shadow: 0 18px 46px rgba(29, 29, 27, .12);
}

.sheet--light { background: var(--grey-soft); }
.sheet--copro { color: var(--grey-light); background: var(--green-deep); }

.page-header {
  display: flex;
  height: 62px;
  align-items: flex-start;
}

.page-header img { width: 170px; }
.page-header--dark img { width: 174px; }

.page-footer {
  position: absolute;
  right: 52px;
  bottom: 24px;
  left: 52px;
  padding-top: 9px;
  border-top: 1px solid rgba(6, 120, 96, .26);
  color: var(--green-deep);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.page-footer--dark {
  border-color: rgba(217, 223, 220, .34);
  color: var(--grey-light);
}

.section-label {
  color: var(--green);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.section-label--light { color: var(--grey-light); }
h1, h2, h3, h4 { font-family: var(--display); }

.page-heading { margin-top: 29px; }

.page-heading h2 {
  max-width: 610px;
  margin-top: 12px;
  color: var(--green-deep);
  font-size: 43px;
  font-weight: 700;
  letter-spacing: -.038em;
  line-height: 1.02;
}

/* Page 1 — couverture, reprise de la mosaïque des quatre marchés. */
.sheet--cover {
  padding: 46px 52px 0;
  color: var(--grey-light);
  background: var(--green-deep);
}

.cover-brand img { width: 292px; }

.cover-title { margin-top: 54px; }

.cover-title > p {
  color: var(--grey);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.cover-title h1 {
  margin-top: 14px;
  color: var(--grey-light);
  font-size: 69px;
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: .9;
  text-transform: uppercase;
}

.cover-mosaic {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  height: 522px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  background: var(--green);
}

.market-card { position: relative; overflow: hidden; }
.market-card::after { position: absolute; inset: 0; content: ""; background: rgba(4, 90, 73, .23); }
.market-card:nth-child(1), .market-card:nth-child(3) { border-right: 2px solid var(--green-deep); }
.market-card:nth-child(-n+2) { border-bottom: 2px solid var(--green-deep); }

.market-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.78) contrast(.96);
}

.market-card:nth-child(1) img { object-position: center 48%; }
.market-card:nth-child(2) img { object-position: center 55%; }
.market-card:nth-child(3) img { object-position: center 49%; }
.market-card:nth-child(4) img { object-position: center 53%; }

.market-card figcaption {
  position: absolute;
  z-index: 2;
  right: 18px;
  bottom: 17px;
  left: 18px;
  color: var(--white);
  font-family: var(--display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.market-card figcaption span {
  display: block;
  margin-bottom: 4px;
  color: var(--green-pale);
  font-family: var(--body);
  font-size: 6px;
  font-weight: 600;
  letter-spacing: .12em;
}

.market-card--active { outline: 6px solid var(--grey-light); outline-offset: -6px; }
.market-card--active::after { background: linear-gradient(180deg, rgba(4, 90, 73, .03), rgba(4, 90, 73, .52)); }
.market-card--active figcaption { color: var(--grey-light); font-size: 15px; }

/* Page 2 — présentation de l’entreprise. */
.page-heading--company { margin-top: 25px; }

.president-word {
  display: grid;
  grid-template-columns: 165px 1fr;
  gap: 38px;
  margin-top: 37px;
  padding: 29px 0 31px;
  border-top: 1px solid rgba(6, 120, 96, .3);
  border-bottom: 1px solid rgba(6, 120, 96, .3);
}

.president-word__identity { color: var(--muted); }

.president-portrait {
  width: 138px;
  height: 153px;
  overflow: hidden;
  border: 1px solid rgba(6, 120, 96, .34);
  background: var(--grey-light);
}

.president-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.president-word__identity > p {
  margin-top: 14px;
  font-size: 8px;
  line-height: 1.5;
}

.president-word__identity strong { color: var(--green-deep); font-family: var(--display); font-size: 10px; }

.president-word__quote blockquote {
  margin-top: 14px;
  padding-left: 24px;
  border-left: 4px solid var(--green);
}

.president-word__quote blockquote p {
  color: #33403c;
  font-size: 13px;
  line-height: 1.58;
}

.president-word__quote blockquote p + p { margin-top: 10px; }
.president-word__quote blockquote strong { color: var(--green-deep); font-weight: 600; }

.company-difference { margin-top: 36px; }

.company-difference h3 {
  margin-top: 12px;
  color: var(--blue-deep);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
}

.company-difference > p:not(.section-label) {
  max-width: 655px;
  margin-top: 16px;
  color: #40504b;
  font-size: 10.4px;
  line-height: 1.67;
}

.company-difference > p + p:not(.section-label) { margin-top: 10px; }
.company-difference strong { color: var(--green-deep); font-weight: 600; }

/* Page 3 — contexte et cheminement copropriété. */
.page-heading--copro { margin-top: 24px; }

.page-heading--copro h2 {
  max-width: 600px;
  color: var(--grey-light);
  font-size: 41px;
}

.context-narrative {
  display: grid;
  grid-template-columns: .95fr .95fr 1.2fr;
  margin-top: 34px;
  border-top: 1px solid rgba(217, 223, 220, .4);
  border-bottom: 1px solid rgba(217, 223, 220, .4);
}

.context-narrative article {
  min-height: 230px;
  padding: 24px 20px 24px 0;
  border-right: 1px solid rgba(217, 223, 220, .28);
}

.context-narrative article + article { padding-left: 20px; }
.context-narrative article:last-child { border-right: 0; }

.context-narrative h3 {
  color: var(--grey-light);
  font-size: 16px;
  font-weight: 700;
}

.context-narrative p {
  margin-top: 12px;
  color: rgba(238, 241, 239, .82);
  font-size: 9.2px;
  line-height: 1.64;
}

.context-narrative strong { color: var(--white); font-weight: 600; }

.project-path {
  margin-top: 34px;
  padding: 28px 28px 34px;
  border: 1px solid rgba(217, 223, 220, .36);
  background: rgba(255, 255, 255, .055);
}

.project-path > header {
  display: grid;
  grid-template-columns: 165px 1fr;
  gap: 24px;
  align-items: start;
}

.project-path > header h3 {
  color: var(--grey-light);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.12;
}

.project-path > header div > p {
  margin-top: 8px;
  color: rgba(238, 241, 239, .7);
  font-size: 8.4px;
  line-height: 1.45;
}

.renovation-timeline {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(108px, .95fr) 64px minmax(142px, 1.25fr) 64px minmax(108px, .9fr);
  gap: 6px;
  margin: 27px 0 0;
  padding: 0;
  list-style: none;
}

.renovation-timeline::before {
  position: absolute;
  z-index: 0;
  top: 31px;
  right: 24px;
  left: 24px;
  height: 2px;
  content: "";
  background: rgba(217, 223, 220, .42);
}

.timeline-item {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.timeline-item--decision {
  display: grid;
  justify-items: center;
  text-align: center;
}

.timeline-decision {
  display: grid;
  width: 56px;
  height: 62px;
  place-items: center;
  color: var(--green-deep);
  background: var(--grey-light);
  font-family: var(--display);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.05;
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
}

.timeline-item > p {
  margin-top: 12px;
  color: rgba(238, 241, 239, .72);
  font-size: 8px;
  line-height: 1.42;
}

.timeline-item > p strong,
.timeline-item > p span { display: block; }

.timeline-item > p strong {
  margin-bottom: 3px;
  color: var(--white);
  font-family: var(--display);
  font-size: 8.1px;
  font-weight: 700;
}

.timeline-phase {
  min-height: 62px;
  padding: 14px 22px 12px 19px;
  color: var(--white);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%, 12px 50%);
}

.timeline-phase span {
  display: block;
  margin-bottom: 3px;
  color: rgba(255, 255, 255, .72);
  font-size: 5.8px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.timeline-phase h4 {
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.timeline-item--diagnostic .timeline-phase { background: var(--green); }
.timeline-item--conception .timeline-phase { background: var(--blue-deep); }
.timeline-item--works .timeline-phase { background: #7e8987; }

.timeline-item--phase > p {
  padding-right: 13px;
  padding-left: 12px;
  font-size: 8.2px;
}

.timeline-notes {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 13px;
  margin: 20px 0 0 70px;
}

.timeline-notes p {
  min-height: 50px;
  padding: 10px 12px;
  border-left: 3px solid var(--blue);
  color: rgba(238, 241, 239, .78);
  background: rgba(65, 109, 138, .2);
  font-size: 7.8px;
  line-height: 1.42;
}

.timeline-notes p:last-child { border-color: var(--green); background: rgba(6, 120, 96, .23); }

.timeline-notes span {
  display: block;
  margin-bottom: 4px;
  color: var(--white);
  font-size: 6px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.regulation-note {
  margin-top: 13px;
  color: rgba(217, 223, 220, .57);
  font-size: 6.4px;
  line-height: 1.45;
}

/* Page 4 — produits et prestations copropriété. */
.sheet--offers { padding-bottom: 42px; }
.page-heading--offers { margin-top: 24px; }
.page-heading--offers h2 { max-width: 600px; font-size: 39px; }

.offer-catalogue {
  margin-top: 31px;
  columns: 2;
  column-gap: 40px;
  column-rule: 1px solid rgba(6, 120, 96, .22);
  border-top: 1px solid rgba(6, 120, 96, .3);
}

.offer-product {
  display: grid;
  grid-template-columns: 23px 1fr;
  gap: 11px;
  padding: 19px 5px 19px 0;
  border-bottom: 1px solid rgba(6, 120, 96, .24);
  break-inside: avoid;
}

.hex-bullet {
  width: 17px;
  height: 19px;
  margin-top: 1px;
  background: var(--green);
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
}

.offer-product h3 {
  color: var(--green-deep);
  font-size: 15.3px;
  font-weight: 700;
  line-height: 1.14;
}

.offer-product p {
  margin-top: 8px;
  color: #52605c;
  font-size: 9.15px;
  line-height: 1.57;
}

.offer-product p strong { color: var(--blue-deep); font-weight: 600; }

@media screen and (max-width: 850px) {
  .viewer-toolbar { grid-template-columns: 1fr auto; min-height: 64px; gap: 1rem; padding: .6rem 1rem; }
  .viewer-toolbar__brand { width: 138px; }
  .viewer-toolbar > p,
  .viewer-toolbar > div > a:first-child { display: none; }
  .viewer-toolbar > div > a:last-child { min-height: 38px; padding-inline: .8rem; font-size: .72rem; }

  .brochure { width: 100%; gap: 12px; margin: 12px auto 30px; }
  .sheet { width: 100%; height: auto; min-height: 0; padding: 28px 20px 46px; box-shadow: none; }
  .page-header { height: 54px; }
  .page-header img { width: 145px; }
  .page-footer { position: static; margin-top: 36px; }

  .page-heading { margin-top: 32px; }
  .page-heading h2 { font-size: clamp(2.4rem, 10.5vw, 3.7rem); }

  .sheet--cover { min-height: calc(100svh - 76px); padding: 32px 20px 0; }
  .cover-brand img { width: min(76vw, 290px); }
  .cover-title { margin: 50px 0 44px; }
  .cover-title h1 { font-size: clamp(2.65rem, 11.5vw, 5.8rem); letter-spacing: -.055em; }
  .cover-mosaic { position: static; width: calc(100% + 40px); height: auto; margin-left: -20px; grid-template-rows: repeat(2, minmax(180px, 38vw)); }
  .market-card figcaption { font-size: .78rem; }
  .market-card--active figcaption { font-size: .9rem; }

  .president-word { grid-template-columns: 1fr; gap: 25px; }
  .president-word__identity { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: end; }
  .president-portrait { width: 120px; height: 132px; }
  .president-word__identity > p { margin: 0 0 4px; }
  .president-word__quote blockquote { padding-left: 18px; }
  .president-word__quote blockquote p { font-size: 1rem; }
  .company-difference > p:not(.section-label) { font-size: .92rem; }

  .context-narrative { grid-template-columns: 1fr; }
  .context-narrative article,
  .context-narrative article + article { min-height: 0; padding: 24px 0; border-right: 0; border-bottom: 1px solid rgba(217, 223, 220, .28); }
  .context-narrative article:last-child { border-bottom: 0; }
  .context-narrative p { font-size: .88rem; }

  .project-path { margin-inline: -20px; padding: 30px 20px; border-right: 0; border-left: 0; }
  .project-path > header { grid-template-columns: 1fr; gap: 10px; }
  .project-path > header div > p { font-size: .82rem; }
  .renovation-timeline { display: block; margin-top: 28px; }
  .renovation-timeline::before { top: 10px; right: auto; bottom: 10px; left: 27px; width: 2px; height: auto; }
  .timeline-item { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: start; margin-top: 22px; }
  .timeline-item:first-child { margin-top: 0; }
  .timeline-item--decision { justify-items: stretch; text-align: left; }
  .timeline-decision { width: 56px; height: 62px; font-size: .7rem; text-align: center; }
  .timeline-item--phase::before { position: absolute; top: 24px; left: 22px; width: 12px; height: 12px; border: 3px solid var(--green-deep); border-radius: 50%; background: var(--grey-light); content: ""; }
  .timeline-phase { grid-column: 2; min-height: 58px; }
  .timeline-phase h4 { font-size: .86rem; }
  .timeline-item > p,
  .timeline-item--phase > p { grid-column: 2; margin-top: 8px; padding: 0; font-size: .78rem; }
  .timeline-item > p strong { font-size: .76rem; }
  .timeline-notes { grid-template-columns: 1fr; margin: 24px 0 0 76px; }
  .timeline-notes p { font-size: .72rem; }
  .regulation-note { font-size: .68rem; }

  .offer-catalogue { columns: 1; column-rule: 0; }
  .offer-product { grid-template-columns: 25px 1fr; padding: 23px 0; }
  .hex-bullet { width: 19px; height: 21px; }
  .offer-product h3 { font-size: 1.12rem; }
  .offer-product p { font-size: .88rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

@page { size: A4 portrait; margin: 0; }

@media print {
  html, body { width: var(--a4-width); background: var(--white); }
  body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .skip-link,
  .viewer-toolbar { display: none !important; }
  .brochure { display: block; width: var(--a4-width); margin: 0; }
  .sheet {
    width: var(--a4-width);
    height: var(--a4-height);
    min-height: var(--a4-height);
    margin: 0;
    overflow: hidden;
    break-after: page;
    page-break-after: always;
    box-shadow: none;
  }
  .sheet:last-child { break-after: auto; page-break-after: auto; }
}