/* =========================================================
   Variante "vert" — proposée au client.
   Override only — main.css must be loaded first.
   Swaps the terracotta CTA palette for the brand green
   sampled from the original logo. Tightens type to two
   families (Fraunces + Manrope) and removes redundant
   eyebrow labels above self-explanatory section titles.
   ========================================================= */

:root {
  /* Brand green from the existing logo */
  --terra:        #1F7A30;
  --terra-deep:   #105828;
  --terra-soft:   #6BB04A;

  /* Lightened paper tones — match the client's existing site */
  --cream:        #F5F2EC;
  --cream-warm:   #EEEAE0;
  --cream-deep:   #DCD4C0;
  --bone:         #FFFFFF;
}

/* Header logo sizing — replaces the SVG mark + wordmark */
.brand--logo .brand__img { display: block; height: 48px; width: auto; }
.brand--footer.brand--logo .brand__img { height: 40px; }

/* =========================================================
   Header CTA — text only (no number for trackable click)
   ========================================================= */
.header-cta__label {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  opacity: 1;
}

/* =========================================================
   Hero — single uniform Fraunces treatment, no italic em
   ========================================================= */
.hero__title {
  font-size: clamp(40px, 5.6vw, 72px);
  font-weight: 500;
  line-height: 1.05;
  margin: 0 0 28px;
  letter-spacing: -0.025em;
  color: var(--ink);
  font-variation-settings: "SOFT" 60, "opsz" 144;
}

/* =========================================================
   Section heads — drop redundant kickers, body-font sub
   ========================================================= */
.section-head__kicker { display: none; }
.section-head__sub {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin-top: 18px;
}

/* =========================================================
   Trust strip — body-font subtext, larger and uniform
   ========================================================= */
.trust-strip__item strong { font-size: 17px; }
.trust-strip__item span {
  font-family: var(--font-body);
  font-size: 14.5px;
  color: rgba(245, 242, 236, 0.72);
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.45;
  margin-top: 2px;
}

/* =========================================================
   Disclaimer — body font, gentle spacing
   ========================================================= */
.prestations__note {
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0;
  color: var(--ink-muted);
  text-align: center;
  margin: 36px auto 0;
  max-width: 640px;
  line-height: 1.55;
  text-transform: none;
}
.prestations__note em { display: none; }

/* =========================================================
   Story (about) — drop the small "L'artisan" eyebrow
   handled in HTML; nothing else to tweak here.
   ========================================================= */

/* =========================================================
   Method step roman numeral — keep Fraunces but drop italic
   ========================================================= */
.method-step__num {
  font-style: normal;
  font-weight: 500;
  color: var(--brass);
}

/* =========================================================
   Zone column titles — body font, less micro-caps clutter
   ========================================================= */
.zone-grid__col-title {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 18px;
}

/* =========================================================
   Final-devis — bigger question, tightly above the heading
   ========================================================= */
.final-devis__question {
  font-family: var(--font-body);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 500;
  color: rgba(245, 242, 236, 0.78);
  margin: 0;
  letter-spacing: 0;
  text-transform: none;
}
.final-devis__title {
  margin-top: 8px;
  margin-bottom: 22px;
}
.final-devis__phone-label {
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variation-settings: "SOFT" 50;
  text-transform: none;
  opacity: 1;
}
.final-devis__phone--big { padding: 22px 36px; }

/* =========================================================
   Footer headings — body font for consistency
   ========================================================= */
.site-footer__col h4 {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--terra-deep);
}

/* =========================================================
   Embedded moonform — bring its label sizes in line with
   the surrounding page so the form doesn't feel small.
   Selectors mirror moonform's own (form.css).
   ========================================================= */
.moonform .header-kicker {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--terra-deep);
}
.moonform .header-title {
  font-size: 24px;
  letter-spacing: -0.015em;
}
.moonform .progress-label {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.moonform .qblock__label,
.moonform .input-label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #1F7A30; /* brand green — form.css scopes --terra back to terracotta inside .moonform */
}

/* Pure-white form card. form.css redefines --bone to #FAF6EC inside .moonform,
   so set the background literally here. */
.moonform .form-card {
  background: #FFFFFF;
}

/* =========================================================
   Bigger body / paragraph type pass
   ========================================================= */
body { font-size: 18.5px; }

.hero__lede { font-size: clamp(17.5px, 1.5vw, 21px); line-height: 1.55; }

.story__lede { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.6; }
.story__copy p:not(.story__lede) { font-size: clamp(16.5px, 1.3vw, 19px); line-height: 1.6; }

.method-step p { font-size: clamp(15.5px, 1.2vw, 17.5px); line-height: 1.6; }

.final-devis__lede { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; }

.hero__bullets { font-size: 16.5px; }

/* =========================================================
   Bigger navbar
   ========================================================= */
.site-nav { font-size: 17px; gap: 32px; }
.site-nav a { font-weight: 500; }

@media (max-width: 980px) {
  .site-nav { display: none; }
}

/* =========================================================
   Section heads — numbering deleted, drop the num column
   so the title spans the whole section-head row.
   ========================================================= */
.section-head {
  grid-template-columns: 1fr;
  gap: 0;
}
.section-head__num { display: none !important; }

/* =========================================================
   Method — paragraphs share a baseline across columns via subgrid,
   so a wrapping h3 (step 3) doesn't push only one paragraph down.
   The column-divider border is removed because the subgrid leaves
   empty space between short heads and the shared paragraph baseline;
   the dividers used to leak through that gap as orphan line segments.
   Columns now separate by padding alone.
   ========================================================= */
.method-steps {
  border-top: 0;
  grid-template-rows: auto 1fr;
  column-gap: clamp(20px, 2.5vw, 36px);
}
.method-step {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  padding-top: 8px;
  padding-right: 0;
  border-right: 0;
}
.method-step__head { margin-bottom: 18px; align-self: start; }
.method-step p { padding-right: 0; }

@media (max-width: 880px) {
  .method-steps { grid-template-rows: none; column-gap: 0; }
  .method-step { display: block; }
}

/* =========================================================
   Trust strip — drop the gold rule lines that created
   visible stripes above and below the section.
   ========================================================= */
.trust-strip {
  border-top: 0;
  border-bottom: 0;
}

/* =========================================================
   Story portrait — host an actual photo of Marseille's
   Vieux-Port instead of the line-drawing SVG. Image file
   lives at ./assets/marseille-vieux-port.jpg (drop the file
   into the website/assets/ folder before deploy).
   ========================================================= */
.story__portrait--photo {
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
  aspect-ratio: 4/5;
  box-shadow: 0 30px 60px -30px rgba(27, 40, 32, 0.35);
  transform: rotate(-1.5deg);
  border-radius: var(--radius-lg);
}
.story__portrait--photo::before { display: none; } /* drop the dashed inner border */
.story__portrait--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================================================
   Bottom devis section — centered, second moonform via iframe
   ========================================================= */
.bottom-devis {
  background: var(--cream);
  padding: clamp(60px, 8vw, 110px) 0;
  border-top: 1px solid rgba(27, 40, 32, 0.08);
}
.bottom-devis__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.bottom-devis__head { margin-bottom: 40px; }
.bottom-devis__title {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ink);
  font-variation-settings: "SOFT" 60;
  margin: 0 0 18px;
}
.bottom-devis__sub {
  font-family: var(--font-body);
  font-size: clamp(16.5px, 1.3vw, 19px);
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0 auto;
  max-width: 560px;
}
.bottom-devis__frame-wrap {
  display: flex;
  justify-content: center;
}
.bottom-devis__iframe {
  display: block;
  width: 100%;
  max-width: 640px; /* wider than the moonform's 599px collapse breakpoint */
  height: 700px;
  border: 0;
  background: transparent;
}
@media (max-width: 660px) {
  .bottom-devis__iframe { height: 880px; max-width: 100%; }
}