/* Artizy, template "Énergie" (landing pages Google Ads)
   Shared by pompe-a-chaleur.html and panneaux-solaires.html: one template,
   two contents. Loaded after site.css. Landing-only parts; the shared ones
   (az-faq, az-tbc, az-linklist, az-quote, az-contact, az-form fields) come
   from site.css.

   New components
   - az-header--lp   reduced header: logo to home + phone, no nav
   - az-lp-hero      hero with headline, proof points, short form, and a
                     photo set into a sand plane (the home collage, one photo)
   - az-proofs       three short proof points with a check
   - az-leadform     short lead form (Nom, Téléphone, NPA, one choice)
   - az-gains        benefits: large serif statements left, paragraph right,
                     between hairlines
   - az-flow         how-it-works diagram: stations + connectors (inline SVG)
   - az-options      two options side by side, as text
   - az-why          one-interlocutor paragraph under the testimonial
   - az-steps        process sequence on a line
   - az-aids         aids and authorizations on sage (energy keeps the green)
   - az-pair         cross-link to the other energy page
   - az-callbar      mobile sticky bar Appeler / Devis, hidden by motion.js
                     (.is-hidden) while a lead form is on screen
   - az-footer--lp   minimal footer */

/* ---------- Reduced header ---------- */
.az-header--lp .az-header__inner { justify-content: space-between; }
.az-header--lp .az-header__actions { margin-left: auto; }
.az-header--lp .az-header__phone { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: var(--t-body); }
.az-header__hint { color: var(--c-ink-soft); font-size: var(--t-small); }

/* ---------- Hero ---------- */
.az-lp-hero {
  display: grid;
  grid-template-columns:
    minmax(calc(var(--gutter) - var(--gap)), 1fr)
    repeat(12, minmax(0, calc((var(--container) - 11 * var(--gap)) / 12)))
    minmax(calc(var(--gutter) - var(--gap)), 1fr);
  column-gap: var(--gap);
  padding-top: var(--s-2);
}

.az-lp-hero__text {
  grid-column: 2 / 9;
  grid-row: 1;
  padding-top: var(--s-3);
}

.az-lp-hero__title {
  font-size: var(--t-3xl);
  line-height: 1.04;
  letter-spacing: -0.022em;
}

.az-lp-hero__lead {
  margin-top: var(--s-2);
  font-size: 1.1875rem;
  line-height: 1.5;
  color: var(--c-ink-soft);
  text-wrap: pretty;
}

.az-lp-hero__form {
  grid-column: 2 / 9;
  grid-row: 2;
  margin-top: var(--s-4);
}

.az-lp-hero__phone {
  grid-column: 2 / 9;
  grid-row: 3;
  margin-top: var(--s-2);
  color: var(--c-ink-soft);
}
.az-lp-hero__phone .az-link { color: var(--c-ink); }

.az-lp-hero__plane {
  grid-column: 10 / 15;
  grid-row: 1 / 4;
  background: var(--c-sand);
}

/* The photo sits inside the plane: sand shows on its left, above, below,
   and runs on to the right edge of the page. Flat, no shadow. */
.az-lp-hero__media {
  grid-column: 10 / 14;
  grid-row: 1 / 4;
  margin: var(--s-5) 0 var(--s-5) var(--s-4);
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: var(--radius);
}
.az-lp-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Proof points ---------- */
.az-proofs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-3);
  margin-top: var(--s-3);
}
.az-proofs__item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  line-height: 1.4;
}
.az-proofs__item svg {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.125rem;
  color: var(--c-sage-deep);
}

/* ---------- Short lead form ---------- */
.az-leadform {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s-3) var(--s-3);
  padding: var(--s-4);
  background: var(--c-sand);
  border-radius: var(--radius);
}
.az-leadform__title {
  grid-column: 1 / -1;
  font-family: var(--f-serif);
  font-size: var(--t-lg);
  line-height: 1.25;
}
.az-leadform__name,
.az-leadform__tel,
.az-leadform__npa { grid-column: span 2; }
.az-leadform__choice { grid-column: span 3; }
.az-leadform__submit {
  grid-column: span 3;
  align-self: end;
  width: 100%;
}
.az-leadform__note {
  grid-column: 1 / -1;
  margin-top: -0.25rem;
  font-size: var(--t-small);
  color: var(--c-ink-soft);
}

/* ---------- Benefits: statements between hairlines (az-gains) ---------- */
.az-benefits { padding-block: var(--s-6) var(--s-6); }
.az-benefits__lead {
  margin-top: var(--s-2);
  margin-bottom: var(--s-5);
  color: var(--c-ink-soft);
}

.az-gains { border-top: 1px solid var(--c-line); }
.az-gains__item {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s-2) var(--gap);
  align-items: baseline;
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--c-line);
}
.az-gains__title {
  grid-column: 1 / 7;
  font-size: var(--t-3xl);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.az-gains__item p {
  grid-column: 7 / 12;
  color: var(--c-ink-soft);
}

/* ---------- How it works ---------- */
.az-flow {
  background: var(--c-sand);
  padding-block: var(--s-6);
}
.az-flow__head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  gap: var(--s-2) var(--s-5);
  align-items: end;
  margin-bottom: var(--s-5);
}
.az-flow__head p { color: var(--c-ink-soft); padding-bottom: 0.4rem; }

.az-flow__track {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.5rem minmax(0, 1fr) 3.5rem minmax(0, 1fr) 3.5rem minmax(0, 1fr);
  align-items: start;
}

.az-flow__station { display: flex; flex-direction: column; }
.az-flow__art {
  width: 100%;
  max-width: 11rem;
  height: auto;
  margin-bottom: var(--s-3);
  color: var(--c-ink);
}
.az-flow__art .az-flow__fill { fill: var(--c-sage); stroke: none; }
.az-flow__art .az-flow__fill--linen { fill: var(--c-linen); stroke: none; }

.az-flow__name {
  font-size: var(--t-lg);
  line-height: 1.25;
  margin-bottom: var(--s-1);
}
.az-flow__text { color: var(--c-ink-soft); }
.az-flow__text strong { font-weight: 500; color: var(--c-ink); }

.az-flow__link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 7.25rem;
  color: var(--c-ink-soft);
}
.az-flow__link svg { width: 100%; height: 1.5rem; overflow: visible; }

.az-flow__note {
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-line);
  font-family: var(--f-serif);
  font-size: var(--t-lg);
  line-height: 1.4;
  text-wrap: pretty;
}

/* ---------- Options side by side ---------- */
.az-options { padding-block: var(--s-7) var(--s-6); }
.az-options__heading { margin-bottom: var(--s-5); }

.az-options__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
  gap: var(--s-5) 0;
}
.az-options__col { padding-right: var(--s-5); }
.az-options__col + .az-options__col {
  padding-left: var(--s-5);
  padding-right: 0;
  border-left: 1px solid var(--c-line);
}


.az-options__title { font-size: var(--t-xl); line-height: 1.2; }
.az-options__fit {
  margin-top: 0.25rem;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: var(--t-lg);
  color: var(--c-sage-deep);
}
.az-options__text { margin-top: var(--s-3); }
.az-options__more {
  margin-top: var(--s-2);
  color: var(--c-ink-soft);
}
.az-options__more strong { font-weight: 500; color: var(--c-ink); }

.az-options__aside {
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-line);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: var(--s-2) var(--s-5);
}
.az-options__aside h3 { font-size: var(--t-lg); line-height: 1.25; }
.az-options__aside p { color: var(--c-ink-soft); }

/* ---------- Proof: testimonial (az-quote) + one interlocutor ---------- */
.az-proof .az-quote { padding-block: var(--s-6) var(--s-5); }
.az-why {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  gap: var(--s-2) var(--s-5);
  padding-block: var(--s-4) var(--s-6);
  border-top: 1px solid var(--c-line);
}
.az-why { align-items: center; }
.az-why__media img { aspect-ratio: 3 / 2; object-fit: cover; }
.az-why__title { font-size: var(--t-xl); line-height: 1.2; margin-bottom: var(--s-2); }
.az-why p { color: var(--c-ink-soft); }

/* ---------- Steps ---------- */
.az-steps { padding-block: var(--s-6) var(--s-7); }
.az-steps__heading { margin-bottom: var(--s-5); }
.az-steps__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--s-4) var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--c-ink-soft);
}
.az-steps__item { position: relative; padding-top: var(--s-3); padding-right: var(--s-2); }
.az-steps__item::before {
  content: "";
  position: absolute;
  top: -0.3125rem;
  left: 0;
  width: 0.5625rem;
  height: 0.5625rem;
  border-radius: 50%;
  background: var(--c-linen);
  border: 1px solid var(--c-ink);
}
.az-steps__item:first-child::before { background: var(--c-ink); }
.az-steps__item:last-child::before { background: var(--c-sage-deep); border-color: var(--c-sage-deep); }
.az-steps__title { font-size: var(--t-lg); line-height: 1.25; margin-bottom: var(--s-1); }
.az-steps__item p { color: var(--c-ink-soft); }

/* ---------- Aids and authorizations ---------- */
.az-aids {
  background: var(--c-sage);
  padding-block: var(--s-6);
}
.az-aids__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: var(--s-4) var(--s-5);
  margin-top: var(--s-5);
}
.az-aids__title { font-size: var(--t-xl); line-height: 1.2; margin-bottom: var(--s-2); }
.az-aids__col p + p { margin-top: var(--s-2); }

/* ---------- Cross-link (reuses az-linklist) ---------- */
.az-pair { padding-bottom: var(--s-6); }
.az-pair__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s-3) var(--gap);
  align-items: end;
}
.az-pair__text {
  grid-column: 1 / 7;
  font-family: var(--f-serif);
  font-size: var(--t-2xl);
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.az-pair__grid > .az-linklist { grid-column: 8 / 13; }

/* ---------- Final form (reuses az-contact) ---------- */
.az-contact--lp { padding-top: var(--s-6); background: var(--c-linen); border-top: 1px solid var(--c-line); }
.az-contact__grid > .az-leadform { grid-column: 7 / 13; }

/* ---------- Minimal footer ---------- */
.az-footer--lp .az-footer__grid { align-items: start; }
.az-footer--lp .az-footer__brand img { margin-bottom: var(--s-2); }

/* ---------- Mobile call bar ---------- */
.az-callbar { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .az-header--lp .az-header__inner { flex-wrap: nowrap; }
  .az-lp-hero__text,
  .az-lp-hero__form,
  .az-lp-hero__phone { grid-column: 2 / 10; }
  .az-lp-hero__plane { grid-column: 11 / 15; }
  .az-lp-hero__media { grid-column: 11 / 14; margin-left: var(--s-3); }
  .az-gains__item p { grid-column: 7 / 13; }
  .az-steps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s-5); border-top: 0; }
  .az-steps__item { border-top: 1px solid var(--c-ink-soft); }
}

@media (max-width: 960px) {
  .az-lp-hero__text,
  .az-lp-hero__form,
  .az-lp-hero__phone { grid-column: 2 / 14; }
  /* Stacked: the photo, then a sand plane behind its lower right corner */
  .az-lp-hero__plane { grid-column: 5 / 15; grid-row: 4; margin-top: calc(var(--s-5) + var(--s-6)); }
  .az-lp-hero__media { grid-column: 2 / 13; grid-row: 4; margin: var(--s-5) 0 var(--s-4); }
  .az-lp-hero__media img { aspect-ratio: 16 / 9; }

  .az-gains__title { grid-column: 1 / 6; }
  .az-gains__item p { grid-column: 6 / 13; }

  .az-flow__track { grid-template-columns: minmax(0, 1fr); }
  .az-flow__station {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    column-gap: var(--s-3);
    align-items: start;
  }
  .az-flow__art { grid-row: 1 / 3; margin-bottom: 0; }
  .az-flow__link { height: 3rem; width: 7rem; }
  .az-flow__link svg { transform: rotate(90deg); width: 2.5rem; }

  .az-pair__text,
  .az-pair__grid > .az-linklist { grid-column: 1 / -1; }
  .az-contact__grid > .az-leadform { grid-column: 1 / -1; }
}

/* The reduced header keeps its phone link; there is no menu to open */
@media (max-width: 900px) {
  .az-header--lp .az-header__actions { display: flex; }
}

@media (max-width: 767px) {
  body.az-lp { padding-bottom: calc(3.5rem + env(safe-area-inset-bottom)); }

  .az-header--lp .az-header__phone { display: inline-flex; }
  .az-header__hint { display: none; }

  .az-lp-hero {
    grid-template-columns: var(--gutter) minmax(0, 1fr) var(--s-4) var(--gutter);
    column-gap: 0;
    padding-top: 0;
  }
  .az-lp-hero__text,
  .az-lp-hero__form,
  .az-lp-hero__phone { grid-column: 2 / 4; }
  .az-lp-hero__text { padding-top: var(--s-2); }
  .az-lp-hero__title { font-size: 2.375rem; }
  .az-lp-hero__lead { font-size: var(--t-body); }
  .az-proofs { flex-direction: column; }
  .az-lp-hero__form { margin-top: var(--s-4); }
  .az-lp-hero__plane { grid-column: 2 / 5; margin: calc(var(--s-4) + var(--s-5)) 0 0 var(--s-5); }
  .az-lp-hero__media { grid-column: 2 / 3; margin: var(--s-4) 0 var(--s-3); }
  .az-lp-hero__media img { aspect-ratio: 4 / 3; }

  .az-leadform { padding: var(--s-3); gap: var(--s-2) var(--s-2); }
  .az-leadform__name,
  .az-leadform__choice,
  .az-leadform__submit { grid-column: 1 / -1; }
  .az-leadform__tel { grid-column: span 4; }
  .az-leadform__npa { grid-column: span 2; }

  .az-benefits { padding-block: var(--s-5); }
  .az-gains__item { padding-block: var(--s-3); }
  .az-gains__title,
  .az-gains__item p { grid-column: 1 / -1; }
  .az-gains__title { font-size: var(--t-2xl); }
  .az-flow { padding-block: var(--s-5); }
  .az-flow__station { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .az-flow__link { width: 5.5rem; }

  .az-options { padding-block: var(--s-6) var(--s-5); }
  .az-options__col,
  .az-options__col + .az-options__col { padding: 0; border-left: 0; }
  .az-options__col + .az-options__col { padding-top: var(--s-4); border-top: 1px solid var(--c-line); }

  .az-steps { padding-block: var(--s-5) var(--s-6); }
  .az-steps__list { grid-template-columns: minmax(0, 1fr); row-gap: 0; border-top: 0; border-left: 1px solid var(--c-ink-soft); margin-left: 0.25rem; }
  .az-steps__item { border-top: 0; padding: 0 0 var(--s-4) var(--s-3); }
  .az-steps__item::before { top: 0.45rem; left: -0.3125rem; }

  .az-pair__text { font-size: 1.75rem; }
  .az-contact--lp { padding-top: var(--s-5); padding-bottom: var(--s-5); }
  .az-why { padding-bottom: var(--s-5); }

  .az-callbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--c-ink);
  }
  .az-callbar__link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 3.5rem;
    color: var(--c-linen);
    font-size: var(--t-body);
    font-weight: 500;
    text-decoration: none;
  }
  .az-callbar__link + .az-callbar__link { background: var(--c-sage-deep); }
  .az-callbar__link svg { width: 1.125rem; height: 1.125rem; }
  .az-callbar__link:focus-visible { outline-color: var(--c-linen); outline-offset: -4px; }
  /* Set by motion.js while a lead form is on screen; visible by default */
  .az-callbar.is-hidden { transform: translateY(100%); visibility: hidden; }
}

@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .az-callbar { transition: transform 300ms var(--ease-out), visibility 0s linear 0s; }
  .az-callbar.is-hidden { transition: transform 300ms var(--ease-out), visibility 0s linear 300ms; }
}

/* ---------- Signature motion: the diagram connectors draw in ---------- */
@media (prefers-reduced-motion: no-preference) {
  .az-lp-hero__title,
  .az-lp-hero__lead,
  .az-lp-hero .az-proofs { animation: az-rise 900ms var(--ease-out) both; }
  .az-lp-hero__lead { animation-delay: 100ms; }
  .az-lp-hero .az-proofs { animation-delay: 180ms; }
  .az-lp-hero__media img { animation: az-settle 1200ms var(--ease-out) 120ms both; }

  .az-motion .az-flow__link path {
    stroke-dasharray: 64;
    stroke-dashoffset: 64;
    transition: stroke-dashoffset 900ms var(--ease-out);
  }
  .az-motion .az-flow__track.is-in .az-flow__link path { stroke-dashoffset: 0; }
  .az-motion .az-flow__track.is-in .az-flow__link:nth-child(4) path { transition-delay: 250ms; }
  .az-motion .az-flow__track.is-in .az-flow__link:nth-child(6) path { transition-delay: 500ms; }
}